如何让ZURB Foundation 6.4.1与Angular 4兼容？

Question

我正在尝试将ZURB Foundation 6.4.1与Angular 4配合使用，但是我失败了。

我正在按照这个教程http://shermandigital.com/blog/zurb-foundation-with-angular-cli/进行操作，但它只适用于Foundation 6.3。

谢谢你的帮助。

- bemed

Answer 1

尝试这个：添加

@import "../node_modules/foundation-sites/assets/foundation";

转换成style.scss格式

这样应该可以解决你的问题。

如果还不行，可以尝试其他解决方案：

1. Install foundation :

   npm install foundation-sites --save

2. When done go to .angular-cli.json (it's a hidden file in the root of project)

3. Add this code:

   "styles": [
   "../node_modules/foundation-sites/dist/foundation-flex.css",
   "styles.scss"
   ],
   "scripts": [
   "../node_modules/foundation-sites/vendor/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/foundation.min.js"
   ],
   

4. It should work but not for everything, like modal for example. Add this to your app.ts or component in question : Code:

   { import Component } from '@angular/core';
   declare var $:any
   
   @Component({
     selector: 'my-component',
     templateUrl: './my-component.html'
     // other stuff here
   });
   
   export class MyComponent implements OnInit {
     constructor() {}
   
     ngOnInit() {
       $(document).foundation();
     }
   }
   

- foufrix

---

如果您现在有一个 angular.json 文件，它应该更改为："styles": [ "node_modules/foundation-sites/dist/css/foundation-flex.css", "styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/foundation-sites/dist/js/foundation.min.js" ], - NoughT

Answer 2

@Raphael ABADIE-MOREAU的答案是可行的，但在最新版本的Foundation Sites（截至我发表此评论的时间为6.5.0），其中一些部分已经失效，以下是我使用的内容:

"styles": [
   "../node_modules/foundation-sites/dist/css/foundation.css",
   "styles.css"
 ],
 "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/js/foundation.min.js"
 ],

另外，您会注意到Foundation网站没有导入jQuery，您需要单独安装它，并确保jQuery在foundation.min.js之前加载。

要将脚本安装到node_modules中，您可以在命令提示符/终端中键入以下内容:

npm i foundation-sites jquery --save

安装foundation-sites和jquery。

- Kingston Fortune

---

是的，我们需要安装jQuery才能使用JQuery。 - Waseem Ahmad Naeem