一、安装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打包