問題與解答 - Angular CLI：全局使用CSS預處理器

Question

如何在我的ng2應用程序中使用預處理器？我正在使用angular-cli，並且the original docs對我來說還不夠清楚。此外，我想在全局範圍內使用這些樣式，不僅是組件範圍的。

Answer 1

1. 安裝CSS編譯器：Search npm for your preffered擴展語言。

   • 測試和建議社科院：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路徑？因爲你可能想使用變量文件，所以它可能會變得非常混亂的絕對路徑！

Answer 2

Angular CLI已經構建了對Sass/SCSS，Less和Stylus的支持。 See here.

從CLI的Webpack更新開始，除了使用適當的擴展名重命名樣式表之外，沒有額外的步驟。

對於以前的System.js/Broccoli版本，還需要將預處理器軟件包安裝到您的應用中，如下所示：npm install node-sass --save-dev。

它會自動處理src文件夾內和下的樣式表。