angular - 如何支持less和sass（scss）

 

 

更新時間：

　　（2018-7-26） - 使用angular6.x最新版本

 

新建項目時，我們指定類型：

 

示例：ng new projectname -style=sass(scss) 2 實例：ng new ng-sass -style=sass

 

less的話，也是是改一下后綴名而已

1 示例：ng new projectname -style=less 2 實例：ng new ng-sass -style=less

 

 

在實際項目中應用的話，大概就是（從angular5.x~6.x），angular-cli.json更名為angular,json

已有項目中運行的話，在angular.json里面添加

 

1. 添加組件scss(angular內置了sass)

  "schematics": { "@schematics/angular:component": { "styleext": "scss" } },

 

2. styles里面的style.css改為scss或sass，具體看你使用哪種

"styles": [ "src/styles.scss" ],

 

3.修改樣式名style.css為style.scss 

 

 

4. 添加完以后，重啟angular，最后在style.scss里面寫的樣式會更新到所有component組件里.