问答 - Angular CLI：在全球范围内使用 CSS 预处理器答案

【问题标题】：Q&A - Angular CLI: Using CSS preprocessors globally问答 - Angular CLI：在全球范围内使用 CSS 预处理器
【发布时间】：2017-01-05 22:18:42
【问题描述】：

如何在我的 ng2 应用中使用预处理器？我正在使用 angular-cli 和 the original docs 对我来说不够清楚。此外，我想在全局范围内使用样式，而不仅仅是在组件范围内。

【问题讨论】：

【解决方案1】：

安装您的 CSS 编译器：Search npm for your preffered 扩展语言。
- 经测试并推荐用于 SASS：npm install node-sass --save-dev
将您的“待处理”文件添加到src/assets/css（使用正常的文件扩展名，例如.sass）
将样式引用添加到index.html 文件中：

<link rel="stylesheet" href="assets/css/whatever.css"> - 注意.css 文件扩展名。
使用“待处理”文件所在的文件夹更新您的构建文件 (angular-cli-build.js)。这个对象必须放在vendorNpmFiles-array 之前。：

sassCompiler: { //(lessCompiler or stylusCompiler) includePaths: [ 'app/assets/css' //Only the folder, not your file! ] }

奖励答案：为什么我不使用文件的直接路径而不是 includePath？因为您可能想使用变量文件，所以绝对路径可能会变得非常混乱！

【讨论】：

【解决方案2】：

Angular CLI 内置了对 Sass/SCSS、Less 和 Stylus 的支持。 See here.

随着对 CLI 的 Webpack 更新，除了使用适当的扩展名重命名样式表之外没有其他步骤。

对于以前的 System.js/Broccoli 版本，还需要将预处理器包安装到您的应用中，如下所示：npm install node-sass --save-dev。

它将自动处理src 文件夹内和下的样式表。

【讨论】：