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文件。