Angular中支持SCSS的方法

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

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

scss介紹

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

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

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

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

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

在指定目錄下運行：ng new myProject –style=scss

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

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

2、修改當前工程

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

將defaults中styleExt值設置為scss

 "defaults": {
  "styleExt": "scss",
  "component": {}
 }

這樣我們在運行ng g component myComponent 等命令生成文件時，默認后綴就是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工程

方法一：

新增的時候就默認為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';

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

Angular
SCSS

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