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

您应该在主要.scss清单（遵循惯例）中引用您应用的许多app/styles/app.sass个文件，如下所示：

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

Broccoli is configured to look for the app.sass manifest file in app/styles，因此，您不再需要设置includePaths：

sassOptions: {},

...从而避免监视整个app目录树。

但是，如果出于某种原因这是禁止的，假设.scss文件与其各自的组件混合在一起，您可以考虑收紧includePaths选项的指定路径以减少一些观看：

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

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

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

设置onlyIncluded选项“有助于提高使用NPM链接模块的性能”。

如何让Ember CLI仅在样式更改时重新编译SASS？

1 个答案: