Angular CLI在Angular項目中如何使用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為例:
新建項目指定css預(yù)處理
在新建angular項目是使用--style指定css預(yù)處理
ng new my-project --style=scss
已有項目指定css預(yù)處理
對于已有的項目,也是支持修改css預(yù)處理。
查看.angular-cli.json,在defaults配置項里有類似下面的聲明:
"defaults": { "styleExt": "css", "component": {} }
使用set指令修改styleExt
ng set defaults.styleExt scss
如果項目統(tǒng)一使用scss,建議把項目里的css文件改為scss,記得也要修改其他文件對css文件的引用。其中styles.css的引用在.angular-cli.json里。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Angular 多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程)
這篇文章主要介紹了Angular 多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)(小白教程),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例
下面小編就為大家分享一篇Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12angular4模塊中給標(biāo)簽添加背景圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標(biāo)簽添加背景圖的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
本文主要介紹AngularJs bootstrap搭載前臺框架基礎(chǔ)頁面的建設(shè),這里整理餓了相關(guān)資料及實現(xiàn)實例代碼,有興趣的小伙伴可以參考下2016-09-09AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例,具有一定的參考價值,有興趣的可以了解一下2017-08-08在AngularJS框架中處理數(shù)據(jù)建模的方式解析
這篇文章主要介紹了在AngularJS框架中處理數(shù)據(jù)建模的方式,作者同時也對AngularJS使用過程中的一些"坑"作了介紹,需要的朋友可以參考下2016-03-03