在 ember-cli 中安装 Foundation 5答案

【问题标题】：Install Foundation 5 in ember-cli在 ember-cli 中安装 Foundation 5
【发布时间】：2015-09-20 12:42:03
【问题描述】：

我对 ember 很陌生，对构建工具也很陌生。我目前正在使用通常的基础安装和基础 cli 和指南针来编译我的 css，这有点痛苦，而且对团队工作非常不利。我认为最好按照文档中的说明使用 bower 安装文件并使用 ember-cli-compass-compiler ，但它没有按预期工作。我想在app/styles 目录中拥有app.scss 文件，并在该文件中导入所有必需的基础组件。我还想将_settings.scss 组件保留在app/styles 目录中，以便轻松共享。

例如

@import "settings";
@import "vendor/foundation/scss/foundation";

但是这给了我错误File to import not found or unreadable: vendor/foundation/scss/foundation.

我可以向您保证，供应商目录中的foundation.scss 文件确实存在。我也尝试在Brocfile.js 中使用app.import() 导入文件，但无济于事。

【问题讨论】：

标签： css ember.js sass compass-sass

【解决方案1】：

如果您想使用 .scss 版本的 Foundation，您应该首先将您的项目配置为使用 broccoli-sass：

npm install --save-dev broccoli-sass

然后将您的 app/styles/app.css 重命名为 app/styles/app.scss。

然后你可以使用 Bower 安装 Foundation：

bower install --save-dev foundation

现在，在您的 app/styles/app.scss 中，您可以使用以下命令导入 Foundation 样式：

@import 'bower_components/foundation/scss/normalize';
@import 'bower_components/foundation/scss/foundation';

【讨论】：

谢谢！那工作得很好。为了让设置在 app/styles 目录中工作，我必须将第 41 行的函数组件的导入编辑到完整的供应商目录。
ember-cli 最近从 vendor 切换到 bower_components 以安装 Bower 组件。因此@import 的路径应相应更新。
谢谢@bazzel。我不确定您的编辑建议为何被拒绝。我更新了原来的答案。

【解决方案2】：

最近刚刚发布了用于基础的 ember-cli 插件

这里：https://github.com/artificialio/ember-cli-foundation-sass

这里：https://www.npmjs.org/package/ember-cli-foundation-sass。

希望对你有帮助！

【讨论】：

【解决方案3】：

接受的答案对我不起作用。如果任何其他开发人员都是这种情况，那么这个答案可能会有所帮助。

首先，安装ember-cli-sass插件

npm install --save-dev ember-cli-sass

接下来，安装基础

bower install --save-dev foundation

此时您可能希望将您的app.css 重命名为app.scss 或app.sass。

接下来，告诉 ember cli 包含刚刚在资产管道构建过程中安装的基础 Sass 文件。在ember-cli-build.js中添加如下代码

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'bower_components/foundation/scss'
    ]
  }
});

在您的app.scss 文件中，使用以下代码行导入基础

@import 'foundation';

如果您不想导入所有基础但只是其中的一部分，那么您可以通过导入适当的组件来做到这一点，例如@import 'foundation/fuctions'

【讨论】：

【解决方案4】：

这对我很有效！只需安装以下软件包，

npm install --save-dev ember-cli-foundation

【讨论】：