1. 安装插件
yarn install less-loader less
这是我安装的版本
2. 修改babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css", // style: true 时加载的是less文件
},
],
],
};
3. 修改vue.config.js配置
module.exports = {
css: {
// css预设器配置项
loaderOptions: {
less: {
modifyVars: {
// less vars,customize ant design theme
"primary-color": "#6F4FF2",
"link-color": "#6F4FF2",
},
javascriptEnabled: true,
// prependData: `@import "@src/...`, // 引用自定义的主色
},
},
},
devServer: {
open: true,
port: 8080,
host: "0.0.0.0",
https: false,
hotOnly: true,
disableHostCheck: true,
proxy: {
},
},
};
4. main.样式
引入样式
import "ant-design-vue/dist/antd.less";
参考文献 :
【动态更换ant-design-vue主题颜色】