基于VUE下使用Ant Design Vue 中的.less文件自定义ui框架样式

Ant Design Vue 官方文档: 传送门

说明:

使用Ant Design Vue 时官方ui不符合需求,(修改菜单组件中选中的菜单项的背景颜色),需要自定义背景颜色,组件中没有给出修改方式,需要使用.less文件修改框架中的样式,官方也给出了修改方法,看的很懵,最终参考了大佬的博客后得出解决方法

使用步骤:

1. 添加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

2. 开启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}
    }
  }
}

3. 在项目src目录下创建*.less文件,在less文件中引入@import '~ant-design-vue/dist/antd.less';
4. 在main.js中引入*.less文件

使用:

less文件中找到需要覆盖的组件进行样式覆盖