Question

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

E.g

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

然而，这给了我错误File to import not found or unreadable: vendor/foundation/scss/foundation.

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

Answer 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内，您可以使用以下内容导入基础样式：

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

Answer 2

刚刚发布了基础的ember-cli插件

此处：https://github.com/artificialio/ember-cli-foundation-sass

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

希望它有所帮助！

Answer 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'

Answer 4

这对我很有用！只需安装以下包

即可

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

在ember-cli中安装Foundation 5

4 个答案: