我自定义less变量的时候,less和less-loader的版本号不一样,会报奇怪的错误。自定义的主题也会根据版本号报不同的错误。最后!我选择的版本less@3.0.4,less-loader@5.0.0本文也是基于less@3.0.4,less-loader@5.0.0进行自定义主题操作1.vue.config.js文件模块。exports={//添加这部分代码css:{requireModuleExtension:true,loaderOptions:{less:{modifyVars:{//lessvars,自定义antdesign主题'primary-color':'#6F48FF','link-color':'#6F48FF'},//这一行不要去掉javascriptEnabled:true}}}}上面的modifyVars参数可以自定义各种主题色,下面是常用的:@primary-color:#1890ff;//全局主色@link-color:#1890ff;//链接颜色@success-color:#52c41a;//成功颜色@warning-color:#faad14;//警告色@error-color:#f5222d;//错误color@font-size-base:14px;//主字体大小@heading-color:rgba(0,0,0,0.85);//标题颜色@text-color:rgba(0,0,0,0.65);//主要文本颜色@text-color-secondary:rgba(0,0,0,0.45);//辅助文本颜色@disabled-color:rgba(0,0,0,0.25);//禁用颜色@border-radius-base:4px;//组件/浮层圆角@border-color-base:#d9d9d9;//边框颜色@box-shadow-base:02px8pxrgba(0,0,0,0.15);//浮层阴影也可以点击查看所有样式变量2.修改antd样式参考文件,因为在步骤1中,我们对应的是less中定义的主题色。我们还需要在main.js中引用less格式的antd样式文件,将原来的import'ant-design-vue/dist/antd.css'修改为:import'ant-design-vue/dist/antd.less'3.重启即可生效
