1.安装npm包
npm i antd-theme-generator --save
2.根目录新建一个文件color.js
const path = require ('path');
const {generateTheme, getLessVars} = require ('antd-theme-generator');
const options = {};
generateTheme ({
antDir: path.join (__dirname, './node_modules/ant-design-vue'), //node_modules中antd的路径
stylesDir: path.join (__dirname, './src/assets/styles'), //styles对应的目录路径
varFile: path.join (__dirname, './src/assets/styles/variables.less'), //less变量的入口文件
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background',
], //您要动态更改的变量列表
outputFilePath: path.join (__dirname, './public/color.less'), //生成的color.less文件的位置
customColorRegexArray: [/^color(.*)$/],
})
.then (res => {
console.log ('配置主题成功');
})
.catch (res => {
console.log ('配置主题失败');
});
3.新建styles相关文件
在color.js里面我们设置styleDir和varFile的属性路径，所以我们需要创建相关的文件。
创建variables.less文件
@link-color: #00375b;
@primary-color: green;
:root {
--PC: @primary-color; //color.less中加入css原生变量：--PC
}
.primary-color {
color: @primary-color;
}
文件目录
3.修改package.json文件
4.main.js中引入ant-design-vue中的less文件
注意：一定要引入.less结尾的文件，不要引入.css文件，否则修改不成功！！！！！！
import {createApp, defineComponent} from "vue";
import App from "./App.vue";
import {InitManager} from "./util/init";
import "ant-design-vue/dist/antd.less";
const instance = createApp(App);
InitManager.init(instance).mount("#app");
5.生成color.less文件并且修改index.html
前几步完成之后，重启服务，因为我们color.js文件outputFilePath是在public下面
所以执行之后，会在public文件夹下面生成一个color.less文件。
修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env:"production"
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</body>
</script>
</html>
6.动态设置主题
现在就button组件写了个示例
<template>
<div class="login-page">
<div class="content">
<a-button type="primary" @click="updatePrimaryColor">点击</a-button>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
// setup() {},
data() {
return {};
},
methods: {
updatePrimaryColor() {
window.less.modifyVars({
"primary-color": "blue",
"btn-primary-bg": "#5d72cc",
}).then(()=>{
console.log('成功')
}).catch(()=>{
console.log('失败')
})
},
},
});
</script>
--------------完美谢幕--------------？？？？？？？？
出现新问题 引用ant-design-vue/dist/antd.less主题样式报错解决方法
当我们使用ant-design-vue组件时，想要设置主题样式，想引用ant-design-vue/dist/antd.less，可是出现如下报错。
./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref–10-oneOf-3-1!./node_modules/postcss-loader/src??ref–10-oneOf-3-2!./node_modules/less-loader/dist/cjs.js??ref–10-oneOf-3-3!./node_modules/ant-design-vue/dist/antd.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
那么我们可以通过在项目中创建一个vue.config.js文件，并写入
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
