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

问题描述：

我正在使用Ember创建项目。该项目使用ember-cli-sass来观看和编译.scss文件。该项目相当庞大且组件化，超过100个独立的scss文件（其中很多文件位于/styles文件夹以外）位于各自的组件文件夹中。其结果是，在ember-cli-build.js配置是这样的：如何让Ember CLI在样式更改时仅重新编译SASS？

sassOptions: { 
    includePaths: ['app'] 
}

列表被截断了一点点，但问题是，该项目包括在文件夹列表中/app路径，以听取所有观看可能的风格改变。

这有两个副作用。首先，它使得SASS编译相当缓慢。其次，当字面上/app层次结构中的任何文件都发生变化时，SASS编译会发生，包括javascript文件。

有什么办法来配置灰烬，CLI或余烬-CLI-青菜只在.scss改变编译？

你能展示更多的代码吗？所有.scss文件都在样式文件夹中？或者每个组件旁边都有.scss文件 – kiwiupover

它们都位于组件旁边的单独文件夹中。我会更新我的问题。 – Soviut

答

你应该主要app/styles/app.sass清单中引用您的应用程序的许多.scss文件（如下约定），像这样：

// 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？

相关推荐