如何让 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。

感谢您的帮助。

Answer 1

试试这个：添加

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

到 style.scss

这应该可以解决您的问题

如果不是其他解决方案：

1. 安装基础：

   npm install foundation-sites --save

2. 完成后转到 .angular-cli.json（它是项目根目录中的隐藏文件）

3. 添加此代码：

   "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. 它应该可以工作，但不是对所有东西都有效，例如模态。将此添加到您的 app.ts 或有问题的组件中： 代码：

   { 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();
     }
   }
   

Answer 2

@Raphael ABADIE-MOREAU 的回答有效，但在我发布此评论时，最新版本的基础网站是 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"
 ],

你还会注意到 jquery 不是从基础站点移植的，你需要单独安装它，并确保 jquery 位于foundation.min.js 之前。

要将脚本安装到 node_modules 中，您可以在 cmd/terminal 中键入：

npm i foundation-sites jquery --save

安装基础站点和 jquery。