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 組件名字