如何让 ZURB Foundation 6.4.1 与 Angular 4 配合使用?

Question

我试图让ZURB基金会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 安装基础站点 --保存

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. 它应该有效，但不适用于所有内容，例如模态。将其添加到您的应用程序或有问题的组件： 法典：

   { 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/终端中键入以下内容：

npm i foundation-sites jquery --save

安装基金会站点和jQuery。