Vue使用SCSS进行组件化开发

Vue
361
0
0
2022-04-25

为什么要用SCSS

scss说明白点,就是,有一个sass对css进行了扩展,但是好像一种新的编程语言,学习成本较高,于是有了scss,会css的人,一看scss,就明白怎么用了,就是这样一个代替css的解决方案。使用它对大型组件化开发的项目很有用,最简单的就是换皮肤,让一键换肤变得很容易,开发起来也比较清晰

vue里使用scss的步骤

1.安装npm的sass模块

sass和scss本质上是同一个东西,只是scss更加语义化,语法一看就会,一般没毛病的人不会考虑使用sass语法

模块安装,执行

npm install node-sass --save-dev

npm install sass-loader --save-dev

2.添加皮肤文件theme.scss

Vue使用SCSS进行组件化开发

Vue使用SCSS进行组件化开发

theme.scss添加了几个颜色变量

3.Vue文件里使用theme.scss的参数

Vue使用SCSS进行组件化开发

4.效果

Vue使用SCSS进行组件化开发

结束

祝大家工作愉快,喜欢的可以关注!!!

么么哒