angular4（3）angular腳手架引入scss

歡迎加入前端交流群來py：749539640

scss。。sass。。。。sccc。。。ssss。。。ccccc。。。。。。MMP·················

先說下scss和sass的異同：

SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標准的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定於瀏覽器的語法，例如：古老的 IE filter 語法。

由於 SCSS 是 CSS 的擴展，因此，所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。也就是說，對於一個 Sass 用戶，只需要理解 Sass 擴展部分如何工作的，就能完全理解 SCSS。大部分擴展，例如變量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分號和花括號而不是換行和縮進。 例如，以下這段簡單的 Sass 代碼：

#sidebar
  width: 30%
  background-color: #faa

只需添加花括號和分號就能轉換為 SCSS 語法：

#sidebar {
  width: 30%;
  background-color: #faa;
}

另外，SCSS 對空白符號不敏感。上面的代碼也可以書寫成下面的樣子：

#sidebar {width: 30%; background-color: #faa}

好了進入正題：

如果你創建工程項目用angular-cli ；你的樣式文件想使用scss, 並且讓ng serve自動編譯它們

第一步：

你可以在創建項目的時候用 

ng new sassy-project --style=scss

或者通過ng set defaults.styleExt scss 來修改你現有的項目；

ng set defaults.styleExt scss

第二步：

利用npm工具安裝sass依賴和loader(npm不行可以試着cnpm)

npm install node-sass --save-dev
npm install sass-loader --save-dev

第三步：

修改.angular-cli.json文件

"styles": [
    "styles.scss"
],
"defaults":{
    "styleExt": "scss",
    "component": {}
}

第四步：

”將項目中已經存在的.css文件改成.scss【項目會自動修改的】

注：新建的component項目會直接生成.scss文件

生成新組件：ng g component 組件名字