Q&A - Angular CLI：全局使用 CSS 预处理器 - Q&A - Angular CLI: Using CSS preprocessors globally 小贝子编程网

如何在ng2应用程序中使用预处理器？我使用的是angular cli，原始文档对我来说不够清晰。此外，我想在全局范围内使用样式，而不仅仅是在组件范围内。

安装你的CSS编译器：在npm中搜索你喜欢的扩展语言。
- 已测试并推荐用于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-数组之前

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

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

Angular CLI内置了对Sass/SCSS、Less和Stylus的支持。请参见此处。

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

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

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

Q&A - Angular CLI：全局使用 CSS 预处理器