angular2項目如何使用sass

angular/cli支持使用sass

新建工程：

若是是新建一個angular工程採用sass：

ng new My_New_Project --style=sass

這樣全部樣式的地方都將採用sass樣式，若是須要使用sass的scss語法，還能夠以下方式：

ng new My_New_Project --style=scss

而後須要手動安裝node-sass:

npm install node-sass --save-dev

這樣就能夠實現用sass語法作樣式了。

已有angular-cli工程改成sass

若是是已經新建了工程，須要切換到sass，則採用以下方法：

首先一樣安裝sass須要的node-sass包

npm install node-sass --save-dev 

而後修改已有項目的.angular-cli.json配置文件：

首先修改最後的defaults標籤

• SASS 語法修改成
  "defaults": {
     "styleExt": "sass",
}

• SCSS語法修改成
  "defaults": {
     "styleExt": "scss",
}


而後修改styles標籤

"styles": [
        "styles.css"

      ],

其中的css修改成sass或scss。

並把全局style.css文件改成style.scss或style.sass。

安裝node-sass注意事項

另外，安裝node-sass因爲須要鏈接github在鏈接aws，很難成功，須要在.npmrc文件中再加入以下內容，讓這些鏈接也都只鏈接淘寶鏡像：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

總結：

目前嘗試的這種樣式寫法不支持內置在組建當中的styles，主要在組建中庸styleUrls引用外部sass文件。