如何使Ember CLI仅在样式变化时重新编译Sass

Question

我正在登上使用Ember构建的项目。该项目使用Ember-CLI-SASS观看和编译.scss文件。该项目相当大且组成型，其中有100多个单独的SCSS文件，其中许多在/styles文件夹之外，在其各自的组件文件夹中。结果，ember-cli-build.js配置看起来像：

sassOptions: {
  includePaths: ['app']
}

列表有点截断了，但要点是，该项目必须在其文件夹列表中包含/app路径以观看所有可能的样式更改。

这有两个副作用。首先，它使SASS编译相当缓慢。其次，当/app层次结构中的任何文件更改（包括JavaScript文件）时，SASS编译会发生。

。

有什么方法可以将Ember-CLI或Ember-CLI-SASS配置为仅在.scss上进行编译？

Answer 1

您应该在主app/styles/app.sass清单中引用应用程序的许多.scss文件（遵循约定），如以下方式：

//    Component SCSS
// -------------------------------------
@import "../components/component-a"
@import "../components/component-b"
@import "../components/component-c"
etc.

BROCCOLI配置为查找app/styles中的App.sass清单文件，因此，您不再需要设置includePaths：

sassOptions: {},

...从而避免了整个app目录树的手表。

但是，如果由于.scss文件与各自的组件混合在一起，您可能会考虑收紧includePaths选项的指定路径以减少某些观看：

sassOptions: {
  includePaths: [
    'app/components',
    'app/styles',
  ]
}

如果您不是依靠样式也是通过链接的NPM模块设置的样式，则可以通过设置onlyIncluded选项来进一步限制：

sassOptions: {
  includePaths: [
    'app/components',
    'app/styles',
  ],
  onlyIncluded: true
}

设置onlyIncluded选项"使用NPM链接模块时可以帮助性能"。