关于Ant-Design of Vue的样式修改

步骤1：安装less / less-loader 依赖

npm install --save-dev less-loader less

步骤2：
以下方式三选一
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 文件：

// build/utils.js
// less: generateLoaders(‘less’),

less: generateLoaders('less', { javascriptEnabled: true })

vue-cli 3＆4： 修改 vue.config.js 文件（不存在就新建一个）：
// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: { javascriptEnabled: true }
    }
  }
}

本人使用的是第三种方法，亲测能用。

步骤3：新建一个 less 文件，这里以 reset.less 为例

步骤4：引用样式
在main.js中引入reset.less文件

import '../src/static/reset.less';

步骤5：修改样式
在reset.less文件中对样式进行修改

.ant-cascader-input.ant-input {
  position: static;
  width: 100%;
  padding-right: 24px;
  height: 42px;
  background-color: transparent !important;
  cursor: pointer;
}

修改成功

转载于此处