ant-design-vue 自定义主题
本博主验证的环境是:
- node v14.17.1
- @vue/cli 4.5.13
less less-loader 版本建议:
npm i less@3 -D
npm i less-loader@4 -D
方法一:nuxt.config.js 中配置自定义less变量
配置nuxt.config.js 文件中的 css属性和 build 属性
css:[
{
src:'ant-design-vue/dist/antd.less', // 一定引入less文件否则自定义颜色不生效!!!
lang:'less'
}
]
build:{
loaders:{
less: {
modifyVars: {
// 可参考官网定制主题之在 vue cli 3 中定制主题
'link-color': '#333',
'border-radius-base':0,
'body-background': '#fff',
'layout-body-background': '#fff',
},
javascriptEnabled: true,
},
}
}
}
方法二:自定义less文件覆盖原有的less变量
1.在assets文件中创建一个自定义主题的less文件,并引入ant-design-vue的less文件
// 一定要引入 mode_modules 文件中的less文件!!!!!【否则会报下文的报错2信息】
@import '../node_modules/ant-design-vue/dist/antd.less'; [@import后要有空格,末尾要加分号。否则可能报错]
// 自定义变量
@border-radius-base:0;
2、配置nuxt.config.js 文件
css:[
//将原有默认引入的 ant-design-vue/dist/antd.css 注释掉
// 全局引入自己自定义的主题文件
{
src:'~/assets/index.less',
lang:'less'
}
]
build:{
loaders:{
less: {
javascriptEnabled: true,
},
}
}
}
报错处理
1、.bezierEasingMixin(); 问题
解决:
在nuxt.config.js的build中配置以下属性
build: {
.......
loaders:{
less: {
javascriptEnabled: true,
},
}
}
.......
2、Module build failed (from ./node_modules/less-loader/dist/cjs.js): friendly-errors 10:43:58
@import ‘ant-design-vue/dist/antd.less’;
^
Can’t resolve ‘./ant-design-vue/dist/antd.less’ in ‘D:\project\assets’
原因
找不到ant-design-vue的less文件
解决
要引入mode_modules中的less文件
@import '../node_modules/ant-design-vue/dist/antd.less';
如果按照以上方式配置还是报错那就请使用 less 3版本 和 less-loader 4 版本
@vue/cli 4.5.13中运行nuxt.js疯狂报警告问题解决
警告:
Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the “loose” mode option was set to “true” for @babel/plugin-proposal-private-methods.
The “loose” option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
解决:
配置nuxt.config.js 文件
babel:{
plugins:[
["@babel/plugin-proposal-private-methods", { "loose": true }],
],
},