一、安裝sass
安裝ruby（運行sass 需要ruby）
https://rubyinstaller.org/downloads/ 下載頁面
https://www.sass.hk/install/ 安裝方法
下載好后看眼添加到環境變量里
安裝完成cmd 下查詢ruby -v 有版本號出現就是安裝成功了
然后重啟IDE (我用的phpstorm)
測試下 ruby -v
1.安裝node-sass
1）安裝node-sass
進入到項目目錄下執行
D:\cmf\angular6\project1>npm install -g node-sass
npm install node-sass --save-dev 這個不全局安裝貌似不太行
D:\cmf\angular6\project1>npm install node-sass --save-dev
> node-sass@4.9.3 install D:\cmf\angular6\project1\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\Administrator\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-57_binding.node
> node-sass@4.9.3 postinstall D:\cmf\angular6\project1\node_modules\node-sass
> node scripts/build.js
Binary found at D:\cmf\angular6\project1\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","a
rch":"x64"})
+ node-sass@4.9.3
updated 1 package in 57.172s
查詢是否安裝成功
D:\cmf\angular6\project1>node-sass -v
node-sass 4.9.3 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
2）安裝sass-loader
D:\cmf\angular6\project1>npm install -g sass-loader
npm WARN sass-loader@7.1.0 requires a peer of webpack@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
+ sass-loader@7.1.0
added 20 packages in 12.062s
2.配置angular.json文件
找到當前項目下的styles配置 修改styles.css為styles.sass
"styles": [
"src/styles.sass"
],
3.修改根目錄下的styles.css為 styles.sass
1)在現有的項目改用sass 組件里定義修改引用sass文件
組件內使用sass 在angular.json里定義
"schematics": {
"@schematics/angular:component":{
"styleext":"sass"
}
}
ng set defaults.styleExt sass
在組件里引用sass文件 （app.component.ts）
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
原有的css文件名也要改成sass后綴（app.component.sass）
重啟 ng serve --open
參考資料：
https://blog.csdn.net/etemal_bright/article/details/80609838
https://www.npmjs.com/package/sass-loader
二、使用sass
使用sass是沒有花括號 {} 和 分號；的
上面其實三部就搞定了，由於沒有看過sass的基本使用，結果弄了半天還以為沒有弄上 憂傷，
1.在sass里使用變量（這里我直接在根目錄styles.sass里寫的）
定義變量
$hg-color:這里有個空格 #f90 注意這里：后面有個空格 最后沒有分號
使用這個變量
結構是沒有大括號的 （ { } ） 也沒有結尾的分號
層級關系 也要有分隔 比如nav 下的 a標簽，就空出來一個間隔
2.在sass文件里導入其他的sass文件
import 語句導入
@import "sass/reset"
3.嵌套規則
同一個元素下的所有子元素包括自身屬性設置
如下面所示
不能使用花括號和分號，注意屬性名后有空格
①定義本身footer屬性 直接寫屬性：color: $text-color-style 這里使用了變量
②定義此元素下的子元素樣式 footer下的類.m2e, 屬性padding-top: 2rem
#footer
color: $text-color-style
.m2e
padding-top: 2rem
.m2e .qr .text
margin-top: 1.2rem
color: $text-color-style
font-size: $font-size-normal
.small-img img
width: 25px
height: 25px
4.繼承@extend 只能繼承父級元素，不要使用后代選擇器（不能繼承一個父元素下的子元素樣式）
繼承的用法就是減少后代選擇器的繼承（后代選擇器 #footer .bor ）
多個元素共同繼承一個樣式
關於打包css分文件
直接運行ng build 所有的樣式代碼都打包在project1\dist\project1\styles.js
這里需要分css打包