1.在vue.config.js配置less
modifyVars里面可以定义多个变量
css: {
loaderOptions: {
less: {
modifyVars: {
/* less 变量覆盖,用于自定义主题 */
'primary-color': '#338DDE',
'handle-color': '#338DDE'
},
javascriptEnabled: true
}
}
}
2.在项目的public目录创建less.min.js和theme.less
less.min.js直接找官方网站下载,也可以在CDN网站上搜less
theme.less里面
1、初始化变量
2、重置页面样式的css代码(注意:配置的变量不能用在其他地方)
@primary-color: #338DDE;
@handle-color: #338DDE;
body{
background-color: @primary-color!important;
color: @handle-color!important;
}
3.在html文件里面引入less.min.js和theme.less
因为后面需要用的window.less的方法
<link rel="stylesheet" href="<%= BASE_URL %>color.less">
<script type="text/javascript" src="<%= BASE_URL %>less.min.js"></script>
4.在项目某处创建setting.js文件
我只用到了updateTheme方法,参数根据你的变量来定
let lessNodesAppended;
const updateTheme = (primaryColor,handleColor) => {
// Determine if the component is remounted
if (!primaryColor || !handleColor) {
return;
}
console.info(`正在编译主题!`)
function buildIt() {
// 正确的判定less是否已经加载less.modifyVars可用
if (!window.less || !window.less.modifyVars) {
return;
}
// less.modifyVars可用
window.less.modifyVars({
'@primary-color': primaryColor,
'@handle-color': handleColor,
})
.then(() => {
console.log('主题更改成功');
})
.catch(() => {
console.log('主题更改失败');
});
}
if (!lessNodesAppended) {
const lessStyleNode = document.createElement('link');
const lessConfigNode = document.createElement('script');
const lessScriptNode = document.createElement('script');
lessStyleNode.setAttribute('rel', 'stylesheet/less');
lessStyleNode.setAttribute('href', process.env.BASE_URL +'theme.less');
console.log(process.env.BASE_URL);
lessConfigNode.innerHTML = `
window.less = {
async: true,
env: 'production',
javascriptEnabled: true
};
`;
lessScriptNode.src = process.env.BASE_URL +'less.min.js';
lessScriptNode.async = true;
lessScriptNode.onload = () => {
buildIt();
lessScriptNode.onload = null;
};
document.body.appendChild(lessStyleNode);
document.body.appendChild(lessConfigNode);
document.body.appendChild(lessScriptNode);
lessNodesAppended = true;
} else {
buildIt();
}
};
const updateColorWeak = colorWeak => {
// document.body.className = colorWeak ? 'colorWeak' : '';
colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
};
export { updateTheme, updateColorWeak }
5.引入setting.js的updateTheme方法,就可以修改配置里的主题变量了
import { updateTheme } from '@/utils/setting'
updateTheme('red','yellow')