一、使用的插件版本
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生成顔色樣式
走到這兒動态切換主題色已經可以實作了----(若有問題,歡迎留言)