一、使用的插件版本
1、“ant-design-vue” 不限版本
注意：ant-design-vue是基于babel-plugin-import按需引入的，在根目录下建了babel.config.js内容如下
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
env: {
development: {
plugins: ['dynamic-import-node'],
},
},
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true,
},
],
],
}
2、 "antd-theme-generator": "^1.2.5" 更换主题的核心插件
特别需要注意的是antd-theme-generator如果是用1.2.8版本，则需要在 node-modules/ant-design-vue/lib/style/themes/default.less 文件中添加下面内容，否则会报LessError: error evaluating function darken: color.toHSL is not a function错误，less无法生成
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;
如果不想改module文件，可以把antd-theme-generator降级到1.2.5版本。
3、 "less": "^2.7.3", "less-loader": "^5.0.0" 因为ant-design-vue是依赖于less进行开发因此安装less和less-loader
二、具体配置
1、在public文件夹下的index.html中加入注释ant design vue切换主题色 下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" target="_blank" rel="external nofollow" >
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app">
</div>
<!-- ant design vue切换主题色 -->
<link rel="stylesheet/less" type="text/css" href="/color.less" target="_blank" rel="external nofollow" />
<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>
</html>
并建一个空的color.less文件，后面通过node color生成对应的less
2、在根目录下建一个color.js内容如下
const path = require('path')
const { generateTheme } = require('antd-theme-generator')
const options = {
antDir: path.join(__dirname, './node_modules/ant-design-vue'),
stylesDir: path.join(__dirname, './src/assets/styles/theme'),
varFile: path.join(__dirname, './src/assets/styles/theme/variables.less'),
mainLessFile: path.join(__dirname, './src/assets/styles/theme/index.less'),
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background',
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options)
.then(() => {
console.log('Theme generated successfully')
})
.catch((error) => {
console.log('Error', error)
})
3、根据color.js中引入的styles下面的文件我们需要在src/assets/styles下面建一个theme文件夹（可以根据个人习惯建文件夹）里面有【index.less,variables.less，】index.less的内容为空。主要的是variables.less，它的内容如下
@import "~ant-design-vue/lib/style/themes/default.less";
@link-color: #00375B;
@primary-color: rgb(138, 164, 182);
:root {
--PC: @primary-color;
}
.primary-color{
color:@primary-color
}
4、修改package.json中的生成语句中，添加【node color】命令，比如我的是
"serve": "node color && vue-cli-service serve",
"build": "node color && vue-cli-service build",
"build:stage": "node color && vue-cli-service build --mode staging",
只要启动项目就会在public的color.less生成颜色样式
走到这儿动态切换主题色已经可以实现了----（若有问题，欢迎留言）
![【GIT】git命令行代码提交流程及注意事项[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)