在ember-cli中安装Foundation 5 [英] Install Foundation 5 in ember-cli

问题描述

对于构建工具来说，我相当陌生，非常新颖。我正在使用通用的基础安装与基础cli和指南针来编译我的css，这是一个痛苦，是非常糟糕的工作在一个团队。我认为最好用bower安装这些文件，并使用文档中所述的 ember-cli-compass-compiler ，但是它不能像预期的那样工作。我想在 app / styles 目录中的 app.scss 文件中导入所有必需的基础组件那个文件。我也想在 app / styles 目录中保留 _settings.scss 组件，以便轻松共享。

E.g

  @importsettings; 
 @importvendor / foundation / scss / foundation; 
  

然而，这给了我错误要导入的文件未找到或不可读：供应商/ foundation / scss / foundation。

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

解决方案

如果要使用.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'; 
  

I am fairly new to ember and very new to the build tools. I am currently using the usual foundation install with the foundation cli and compass to compile my css, this is a bit of a pain and is very bad for working on a team. I thought it would be better to install the files with bower and use ember-cli-compass-compiler as stated in the docs but its not working as expected. I would like to have the app.scss file in the app/styles directory and import all the required foundation components within that file. I would also like to keep the _settings.scss component within the app/styles directory so it can be easily shared.

E.g

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

However this gives me the error File to import not found or unreadable: vendor/foundation/scss/foundation.

I can assure you that the foundation.scss file in the vendor directory does exist. I have also tried importing the file using app.import() in the Brocfile.js but with no avail.

解决方案

If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:

npm install --save-dev broccoli-sass

and then rename your app/styles/app.css to app/styles/app.scss.

Then you can install Foundation using Bower with:

bower install --save-dev foundation

Now, inside your app/styles/app.scss, you can import the Foundation styles with:

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

这篇关于在ember-cli中安装Foundation 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！