vue+less 实现主题快速切换（换肤），无js简单好理解

vue+less 主题

表现形式

插件

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

vue.config.js

使theme.less里的less变量全局可用

const path=require("path");
module.export={
    /** 全局less变量 */
    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [path.resolve(__dirname, "./src/assets/theme/theme.less")],
        },
    },
}

index.css

将主题设置存放在**.css**文件中，注意不是.less，防止预编译产生重复类

[data-theme="default"]{
    --testColor:pink;
    --testImg:url("~@/images/pic.png");
    --el_button:red !important;
}
[data-theme="primary"]{
    --testColor:#fff;
    --otherStyle:#000;
}

在main.js中全局引入该文件

import "@/assets/theme/index.css";

theme.less

@img_base:"~@/assets/images";//图片路径
/** 主题设置 */

/** 封装样式 */
.list{
    width:100%;
	color:var(--testColor);
    background:var(--testImg);
}

使用主题p.q

1. 添加动态属性:data-theme

   <div :data-theme="theme" class="app">
   	<div class="child" @click="event"></div>
   </div>
   

2. 控制参数改变主题

   export default{
       data(){
   		return {
   			theme:"default",
           }
       },
       methods:{
           /** 点击更改主题 */
   		event(){
   			this.theme="primary";
           }
       }
   }
   

3. 配置主题属性

   .app{
       background:var(--otherStyle);//引用主题样式
       .child{//子类也能用
           .list();//引用封装主题样式
       }
   }