vue+less 实现全局变量和换肤功能_vue 皮肤全局变量

首先安装less依赖
这里为了一些不必要的麻烦 直接安装指定版本 要不然使用时候会出问题

npm install less@3.0.4 
npm install less-loader@5.0.0
1
2

安装以后新建一个less文件 用于存放全局变量取名global.less

less里面可以命名一些变量

@back: red;
1

然后如果没有vue.config.js文件的话 就在根目录创建一个vue.config.js文件

vue.config.js里面引入创建的那个全局变量

const path = require("path");
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径
        path.resolve(__dirname, './src/assets/less/global.less')
      ]
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12

然后在别的页面就可以用这个less文件里面的变量了

使用方式 ：别忘了在style标签加上 lang="less"

<style lang="less" scoped>
.box{
  width:100px;
  height:100px;
  background-color: @back;
}
</style>
1
2
3
4
5
6
7

这样已经实现第一步 可以用less使用全局变量 接下来做换肤功能
在和global.less同级创建一个theme.css文件

theme.css
1

/* 白天主题 */
.white-theme {
    --back: #fff;
}

/* 暗夜模式 */
.black-theme {
    --back: #000;
}
1
2
3
4
5
6
7
8
9

把之前那个global.less里面的内容也修改一下

global.less
1

@import 'theme.css';  //引入创建的theme.css文件

@back: var(--@back);

1
2
3
4

不要忘了在main.js引入这个global.less文件

import "./assets/less/global.less"; //换肤样式
1

点击切换皮肤时候触发点击事件

    //切换颜色
    changeColor() {
      document.body.className = "black-theme";
      console.log(document.body.className);
    },
1
2
3
4
5

实现原理就是给顶级标签动态的添加类名

可能有的地方写的不太详细 有什么不明白的欢迎来私信我 前端的路上一起加油啊
！！！