css - 问答 - Angular CLI : Using CSS preprocessors globally

Question

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

Answer 1

1. 安装你的 CSS 编译器:Search npm for your preffered扩展语言。

   • 经过测试并推荐用于 SASS:npm install node-sass --save-dev

2. 将您的“待处理”文件添加到src/assets/css (使用普通文件扩展名，例如 .sass )

3. 将样式引用添加到 index.html文件:

   <link rel="stylesheet" href="assets/css/whatever.css"> - 注意 .css文件扩展名。

4. 使用“待处理”文件所在的文件夹更新构建文件 ( angular-cli-build.js)。此对象必须放在 vendorNpmFiles 之前-数组:

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

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