Javascript ZurfFoundation 6.4.3如何在angular 4.4.4项目中工作

我一直试图在angular 4项目中安装zurb 4.3基础。我遵循我找到的这个网站的步骤。

---

但它不起作用。有人能给我一个循序渐进的过程，让ZURB基金会框架与我的角度4项目一起工作吗？请包括测试运行所需的所有代码。假设这是一个使用angular cli的全新项目。

我想我应该写一些更新的步骤，因为这篇文章已经有一年多的历史了。考虑到这一点，角度的版本是1.1.10，基础的版本是5.5.0.

创建新的Angular CLI项目和安装依赖项

使用SCSS样式选项创建新的Angular CLI项目：

ng新ng基金会应用程序--style=scss

安装后，进入

ng foundation app

目录：

cd-ng基金会应用程序

为场地安装地基

安装站点的基础SCS版本（在编写V5.5.0时）：

npm安装基础站点--保存

您可能会看到关于安装缺少的依赖项的警告。接下来我们将安装jQuery，忽略what-input.js，因为它不会破坏本指南中的任何内容

安装jQuery

安装JQuery，因为网站需要它：

npm安装jquery@2.2.0--保存

配置

在

src/assets/

目录中，创建一个名为

foundationsites

的新目录

在此新目录中粘贴以下内容的副本：

• \u global.scss

  发件人：

  节点模块/基础站点/scss/\u global.scss

• \u settings.scss

  发件人：

  节点模块/基础站点/scss/settings/\u settings.scss

在重复的

\u settings.scss

和

\u global.scss

文件中，找到带有@import'util/util'的行；并将其更改为指向正确的目录：

@import'../node_modules/foundation sites/scss/util/_util'

在

src/styles.scss

中，添加来自

node_modules/foundation sites/scss/foundation.scss

的导入语句，并调整目录路径。（请注意，我们正在使用放置在

src/assets/foundation sites

目录中的重复

\u settings.scss

和

\u global.scss

文件

在同一文件中，包括：

@import./node_模块/基础站点/资产/基础”

您的

src/styles.scss

文件应如下所示：

/**
* ZURB网站的基础
*版本6.5.0
*基础。
*根据麻省理工学院开放源码许可
*/
//依赖关系
@导入“../node_模块/基础站点/SCS/vendor/normalize”；
@导入“../node_modules/foundation sites/_vendor/sassy list/stylesheets/helpers/missing dependencies”；
@导入“../node_modules/foundation sites/_vendor/sassy list/stylesheets/helpers/true”；
@导入“../node_模块/基础站点/_供应商/sassy列表/样式表/函数/contain”；
@导入“../node_模块/基础站点/_供应商/sassy列表/样式表/函数/purge”；
@导入“../node_modules/foundation sites/_vendor/sassy list/stylesheets/functions/remove”；
@导入“../node_模块/基础站点/_供应商/sassy列表/样式表/函数/replace”；
@导入“../node_modules/foundation sites/_vendor/sassy list/stylesheets/functions/to list”；
基础基础
@导入“./node_模块/基础站点/资产/基础”；
//设置（自定义）
@导入“资产/基础场地/设置”；
//全局变量和样式（自定义）
@导入“资产/基础场地/全球”；
//---组件---
@导入“../node_modules/foundation sites/scss/forms/forms”；
@导入“../node_模块/基础站点/SCS/排版/排版”；
//网格
@导入“../node_模块/基础站点/scss/grid/grid”；
@导入“../node_模块/基础站点/scss/xy网格/xy网格”；
//通用组件
@导入“../node_modules/foundation sites/scss/components/button”；
@导入“../node_模块/基础站点/SCS/组件/按钮组”；
@导入“../node_modules/foundation sites/scss/components/close button”；
@导入“../node_模块/基础站点/SCS/components/label”；
@导入“../node_模块/基础站点/SCS/组件/进度条”；
@导入“../node_modules/foundation sites/scss/components/slider”；
@导入“../node_modules/foundation sites/scss/components/switch”；
@导入“../node_模块/基础站点/SCS/components/table”；
//基本组成部分
@导入“../node_模块/基础站点/SCS/components/badge”；
@导入“../node_模块/基础站点/SCS/组件/面包屑”；
@导入“../node_模块/基础站点/SCS/components/callout”；
@导入“../node_模块/基础站点/SCS/components/card”；
@导入“../node_模块/基础站点/SCS/组件/下拉列表”；
@导入“../node_modules/foundation sites/scss/components/pagination”；
@导入“../node_modules/foundation sites/scss/components/tooltip”；
//容器
@导入“../node_模块/基础站点/SCS/components/accordion”；
@导入“../node_modules/foundation sites/scss/components/media object”；
@导入“../node_模块/基础站点/SCS/components/orbit”；
@导入“../node_模块/基础站点/SCS/components/responsive embed”；
@导入“../node_模块/基础站点/SCS/组件/选项卡”；
@导入“../node_模块/基础站点/SCS/组件/缩略图”；
//基于菜单的容器
@导入“../node_模块/基础站点/SCS/组件/菜单”；
@导入“../node_模块/基础站点/SCS/组件/菜单图标”；
@导入“../node_模块/基础站点/SCS/组件/手风琴菜单”；
@导入“../node_模块/基础站点/SCS/components/drilldown”；
@导入“../node_模块/基础站点/SCS/组件/下拉菜单”；
//布局组件
@导入“../node_模块/基础站点/scss/components/o”