Ember-Cli SASS 设置答案

【问题标题】：Ember-Cli SASS SettingsEmber-Cli SASS 设置
【发布时间】：2015-03-09 22:23:14
【问题描述】：

我使用的是ember-cli-sass 而不是broccoli-ruby-sass

这些是我已经完成的步骤

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

bower install --save foundation

我在启动ember server 后在控制台中收到此错误

我不明白为什么它说“找不到文件：/app/styles/app.scss”

我没有任何 app.scss 来自

我在配置中遗漏了一些东西，到底是什么问题？

我正在使用三个 sass 文件

_global.sass
_music.sass
_player.sass

我在 app.sass 中导入它们

@import global
@import player
@import music

我正在阅读https://www.npmjs.com/package/ember-cli-sass，上面写着

在 config/environment.js 中指定一些包含路径：

ENV.sassOptions = {
  includePaths: [
    'bower_components/foundation/scss'
  ]
}

我对这些设置有点困惑，我需要一些建议

【问题讨论】：

您始终可以使用ember install:addon ember-cli-foundation-sass，它会设置您使用ember-cli-sass 和其他好东西

标签： ember.js sass ember-cli

【解决方案1】：

我认为您遇到了错误，因为您可能没有将 app.css 文件的名称更改为 app.scss

您的app/styles 文件夹中应该有一个名为app.scss 的文件，我会放入您的导入文件

// app.scss
   @import 'foundation';
   @import 'global';
   @import 'player';
   @import 'music';

那么你需要添加：

ENV.sassOptions = {
  includePaths: [
    'bower_components/foundation/scss'
  ]
}

像这样给你的config/environment.js：

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'test-sass',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    sassOptions: {
      includePaths: [
        'bower_components/foundation/scss'
      ]
    },
    EmberENV: {
      FEATURES: {
   .....

如果您希望在您的 ember-cli 应用程序中使用基础，请使用 ember-cli 插件：https://www.npmjs.com/package/ember-cli-foundation-sass

【讨论】：

【解决方案2】：

我认为 ember-cli-sass 默认会查找扩展名为 .scss 的 sass 文件。如果您使用 .sass 的文件扩展名，则需要在 sassOptions 中指定它。

ENV.sassOptions = {
  includePaths: [
    'bower_components/foundation/scss'
  ],
  extension: 'sass'
}

查看https://github.com/aexmachina/ember-cli-sass

【讨论】：