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
-
添加动态属性
:data-theme
<div :data-theme="theme" class="app"> <div class="child" @click="event"></div> </div>
-
控制参数改变主题
export default{ data(){ return { theme:"default", } }, methods:{ /** 点击更改主题 */ event(){ this.theme="primary"; } } }
-
配置主题属性
.app{ background:var(--otherStyle);//引用主题样式 .child{//子类也能用 .list();//引用封装主题样式 } }