Ant Design Vue 官方文档: 传送门
说明:
使用Ant Design Vue 时官方ui不符合需求,(修改菜单组件中选中的菜单项的背景颜色),需要自定义背景颜色,组件中没有给出修改方式,需要使用.less文件修改框架中的样式,官方也给出了修改方法,看的很懵,最终参考了大佬的博客后得出解决方法
使用步骤:
-
添加less和less-loader依赖
确保正确安装 less 和 less-loader 依赖,在控制台输入以下命令:
npm install --save-dev less-loader less
注意: 安装less和less-loader后启动项目可能会报错,我的解决办法是降低这两个依赖的版本,原来的版本是less@4.0.0 && less-loader@10.0.0
改为了less@3.0.0 && less-loader@5.0.0
-
开启javascriptEnabled
以下三种方式选择其中一个
webpack@4:修改 webpack.config.js 文件:
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
options: {javascriptEnabled: true},
}],
// ...other rules
}],
// ...other config
}
vue-cli 2:修改 build/utils.js 文件:
less: generateLoaders('less', {javascriptEnabled: true}),
vue-cli 3&4:修改 vue.config.js 文件(不存在就新建一个):
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {javascriptEnabled: true}
}
}
}
- 在项目src目录下创建
*.less
文件,在less文件中引入@import '~ant-design-vue/dist/antd.less';
- 在main.js中引入
*.less
文件
使用:
less文件中找到需要覆盖的组件进行样式覆盖