五分钟学会使用Sass定制项目主题（换肤）新手向

目录

vue项目使用sass定制主题或称作换肤功能，先上效果图

1 引入sass 

2 创建sass样式文件夹，

3 主题配置步骤详解

themes文件夹

darl_var.scss

light_var.scss

dark.scss中引入dark_var.scss 使用我定义好的值

以及light.scss

common文件夹

themes.scss

handle.scss

common.scss

themefy.scss文件

然后在sass样式总文件themefy.scss下引入handle.scss

4 在App.vue中引入themefy.scss

切换主题

5 总体思路

---

vue项目使用sass定制主题或称作换肤功能，先上效果图

示例中实现了背景的主题切换，根据需要，整体全部组件的切换后面会讲到

直接上干货,

1 引入sass 

npm install node-sass --save-dev 

npm install sass-loader --save-dev

 注意，若使用

经常会报错，解决方案有两种 1 npm引入时 设置好下载包的版本号 

                                                2 在package.json中，找到两个依赖，改变版本号，删除node_modules文件夹，重新npm install 这样相当于重新下载全部的依赖，

我使用的版本是（package.json下）

"node-sass": "^4.14.1",

"sass-loader": "^7.3.1",

2 创建sass样式文件夹，

我这里是在src下新建了public/scss

 并且在scss下新建了两个文件夹和一个sass总文件themefy.scss，

 

3 主题配置步骤详解

themes文件夹

先讲解thems文件夹，我这里两个主题命名为light（浅色）和dark（深色）

dark_var.scss和light_var.scss是两大主题的配置值，可以理解成自己给样式配置具体的值,我这里只均定义了一个值

darl_var.scss

$dark-bg-color:rgb(21, 21, 133)

light_var.scss

$light-bg-color:#e1e1e7;

然后我们将配置值分别使用到到各主题中去