第Angular中支持SCSS的方法SCSS是Sass3引入新的語法，其語法完全兼容CSS3，并且繼承了Sass的強(qiáng)大功能。也就是說，任何標(biāo)準(zhǔn)的CSS3樣式表都是具有相同語義的有效的SCSS文件。另外，SCSS還能識(shí)別大部分CSShacks（一些CSS小技巧）和特定于瀏覽器的語法，例如：古老的IEfilter語法。

由于SCSS是CSS的擴(kuò)展，因此，所有在CSS中正常工作的代碼也能在SCSS中正常工作。也就是說，對(duì)于一個(gè)Sass用戶，只需要理解Sass擴(kuò)展部分如何工作的，就能完全理解SCSS。大部分?jǐn)U展，例如變量、parentreferences和指令都是一致的；唯一不同的是，SCSS需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)

在為組件添加樣式時(shí)，為了樣式的模塊化，通常我們會(huì)使用SCSS、SASS。那么如何讓我們的Angular工程支持SCSS或者SASS呢？下面將從以下兩中方式來介紹：

創(chuàng)建工程時(shí)來指定

修改當(dāng)前的工程

１、創(chuàng)建工程時(shí)來指定

在指定目錄下運(yùn)行：ngnewmyProject–>

注：這里使用的Angular的CLI來創(chuàng)建工程的。

如果要指定SASS，則將scss換為sass即可。

2、修改當(dāng)前工程

修改angular-cli.json文件，主要有兩個(gè)地方需要修改：

將defaults中styleExt值設(shè)置為scss

"defaults":{

"styleExt":"scss",

"component":{}

}

這樣我們?cè)谶\(yùn)行nggcomponentmyComponent等命令生成文件時(shí)，默認(rèn)后綴就是scss

在apps下的styles中將styles.css修改為styles.scss

"apps":[

"root":"src",

"outDir":"dist",

"assets":[

"assets",

"favicon.ico"

"index":"index.html",

"main":"main.ts",

"polyfills":"polyfills.ts",

"test":"test.ts",

"tsconfig":"tsconfig.app.json",

"testTsconfig":"tsconfig.spec.json",

"prefix":"app",

"styles":[

"styles.scss"

"scripts":[],

"environmentSource":"environments/environment.ts",

"environments":{

"dev":"environments/environment.ts",

"prod":"environments/d.ts"

注：不要忘記修改style.css文件的后綴。

angularcli轉(zhuǎn)變css工程為scss工程

方法一：

新增的時(shí)候就默認(rèn)為scss

ngnewMy_New_Project-->

方法二：

1、修改.angular-cli.json配置文件：

"defaults":{

"styleExt":"scss",

"styles":[

"styles.scss"

],

2、在src目錄下新增文件_variables.scss

3、style.scss文件里配置如下：

@import'variables';

@i