这里可以参照官方文档。
项目根目录下修改vue.config.js文件(需要安装less和less-loader,且安装版本不能太高,我最开始安装最新的版本,一直有各种报错,之后卸载了再安装低版本的就可以了)
// vue.config.js for [email protected]
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
// If you are using less-loader@5 please spread the lessOptions to options directly
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
};
未生效解决方法:
注意样式必须加载 less 格式,一个常见的问题就是引入了多份样式,less 的样式被 css 的样式覆盖了。
- 如果在使用 babel-plugin-import 的 style 配置来引入样式,需要将配置值从 'css' 改为 true , 这样会引入 less 文件。
- 如果是通过 'ant-design-vue/dist/antd.css' 引入样式的,改为 'ant-design-vue/dist/antd.less' 。
这样子就可以了。