快捷導(dǎo)航

Angular中支持SCSS的方法

更新時(shí)間：2017年11月18日 16:02:44 作者：一路斜陽

這篇文章主要介紹了Angular中支持SCSS的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

scss介紹

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

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

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

創(chuàng)建工程時(shí)來指定
修改當(dāng)前的工程

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

在指定目錄下運(yùn)行：ng new myProject –style=scss

注：這里使用的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)行ng g component myComponent 等命令生成文件時(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/environment.prod.ts"
   }
  }
 ],

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

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

方法一：

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

ng new My_New_Project --style=scss

方法二：

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

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

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

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

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Angular
SCSS

相關(guān)文章

Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能
這篇文章主要介紹了Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能,對(duì)Angular.js services的學(xué)習(xí)有所幫助，需要的朋友可以參考下
2018-07-07
AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過這個(gè)問題，在當(dāng)Angular.JS ng-repeat數(shù)組中有重復(fù)項(xiàng)時(shí)，系統(tǒng)就會(huì)拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細(xì)的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
如何編寫一個(gè)完整的Angular4 FormText 組件
本篇文章主要介紹了如何編寫一個(gè)完整的Angular4 FormText 組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
詳解AngularJS中的filter過濾器用法
這篇文章主要介紹了AngularJS中的filter過濾器用法,包括其在模版中和在controller以及service的常見應(yīng)用場(chǎng)合,需要的朋友可以參考下
2016-01-01
詳解Angular 中 ngOnInit 和 constructor 使用場(chǎng)景
最初學(xué)習(xí)Angular的時(shí)候總是搞不清楚ngOnInit和constructor的區(qū)別，現(xiàn)在我們來稍微理一下兩者之間的區(qū)別。
2017-06-06
Angular中懶加載模塊初始化技術(shù)實(shí)例解析
這篇文章主要為大家介紹了Angular中懶加載模塊初始化技術(shù)實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了$http使用post請(qǐng)求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-08-08
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-06-06
Angular簡(jiǎn)單驗(yàn)證功能示例
這篇文章主要介紹了Angular簡(jiǎn)單驗(yàn)證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器
我們?cè)陂_發(fā)的時(shí)候都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的相關(guān)資料,需要的朋友可以參考下
2022-03-03