ant-design-vue自定义主题
首先看官方文档的解释:Ant Design Vue定制主题根据需要,我这里是vue3的版本1、修改vue.config.js,新加入如下代码块module.exports = {........................css: {loaderOptions: {less: {lessOptions: {// I...
·
首先看官方文档的解释:
Ant Design Vue 定制主题
根据需要,我这里是vue3的版本
1、修改vue.config.js,新加入如下代码块
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,
},
},
},
},
};
2、修改main.js文件,引入
import 'ant-design-vue/dist/antd.less'
3、定制主题用的是less样式文件,需要在vue项目中,引入less的插件
npm install -D less-loader@6.0.0
重点就是这个,要使用6版本的less-loader
我这里的less版本时4.5
npm i less
看了很多的教程,配置后发现项目无法编译,因为语法错误
最后尝试6.0.0版本发现编译通过,主题色改变
更多推荐
已为社区贡献11条内容
所有评论(0)