正确更改Ant Design of Vue样式的问题

@import "~ant-design-vue/dist/antd.less";   // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less";   // 用于覆盖上面定义的变量

npm install --save-dev less-loader less

// 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
}

// build/utils.js
// less: generateLoaders('less'),
less: generateLoaders('less', {javascriptEnabled: true}),

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {javascriptEnabled: true}
    }
  }
}

//只添加未被注释代码行即可
//import Vue from 'vue'
import Antd from 'ant-design-vue'
//import App from './App'
import '../static/reset.less'           //———>引入 reset.less，请确保路径正确。
 
//Vue.config.productionTip = false
 
Vue.use(Antd)
 
//new Vue({
//  el: '#app',
//  components: { App },
//  template: '<App/>'
//})

@import '~ant-design-vue/dist/antd.less';  //———>后缀是 less，别写成 css 。
 
.ant-btn-primary {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
  background-color: #f55252;
  border-color: #f55252;
}