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

这应该可以解决您的问题

如果不是其他解决方案：

安装基础：

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

添加此代码：

"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"
],

它应该可以工作但不适用于所有事情，例如模态。将此添加到您的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。

如何让ZURB Foundation 6.4.1与Angular 4一起使用？

2 个答案: