如何获得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安装基础的网站--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(); 
       } 
   }