Angular CLI在Angular項(xiàng)目中如何使用scss詳解
前言
SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語法，例如：古老的 IE filter 語法。
由于 SCSS 是 CSS 的擴(kuò)展，因此，所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。也就是說，對于一個 Sass 用戶，只需要理解 Sass 擴(kuò)展部分如何工作的，就能完全理解 SCSS。大部分?jǐn)U展，例如變量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分號和花括號而不是換行和縮進(jìn)。
Angular CLI支持多種css預(yù)處理，包括：
- css
- scss
- less
- sass
- styl (stylus)
默認(rèn)值為css。
Angular有兩種方式指定css預(yù)處理。下面以scss為例：
新建項(xiàng)目指定css預(yù)處理
在新建angular項(xiàng)目是使用--style指定css預(yù)處理
ng new my-project --style=scss
已有項(xiàng)目指定css預(yù)處理
對于已有的項(xiàng)目，也是支持修改css預(yù)處理。
查看.angular-cli.json，在defaults配置項(xiàng)里有類似下面的聲明：
"defaults": {
"styleExt": "css",
"component": {}
}
使用set指令修改styleExt
ng set defaults.styleExt scss
如果項(xiàng)目統(tǒng)一使用scss，建議把項(xiàng)目里的css文件改為scss，記得也要修改其他文件對css文件的引用。其中styles.css的引用在.angular-cli.json里。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Angular 多級路由實(shí)現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程)
這篇文章主要介紹了Angular 多級路由實(shí)現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家介紹了Angular?ViewChild組件間通信demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
下面小編就為大家分享一篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
angular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
使用ionic播放輪詢廣告的實(shí)現(xiàn)方法(必看)
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實(shí)現(xiàn)方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
本文主要介紹AngularJs bootstrap搭載前臺框架基礎(chǔ)頁面的建設(shè)，這里整理餓了相關(guān)資料及實(shí)現(xiàn)實(shí)例代碼，有興趣的小伙伴可以參考下2016-09-09
在AngularJS中$interval用來處理間歇性處理一些事情,接下來通過本文給大家介紹AngularJS中$interval的用法，需要的朋友參考下2016-02-02
AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實(shí)現(xiàn)頭像截取的示例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
在AngularJS框架中處理數(shù)據(jù)建模的方式解析
這篇文章主要介紹了在AngularJS框架中處理數(shù)據(jù)建模的方式,作者同時也對AngularJS使用過程中的一些"坑"作了介紹,需要的朋友可以參考下2016-03-03