一、修改antd主題色

先貼個官網的圖片

image.png

然后說說整體流程...

• 在根目錄下創建文件vue.config.js文件

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#ff0000',//修改全局主色，其它屬性看官網
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

• 把main.ts中的import 'ant-design-vue/dist/antd.css';修改為import 'ant-design-vue/dist/antd.less';

• 修改css為less的時候會報錯.bezierEasingMixin()

  
  
  image.png
  
  

  解決方法：在package.json中，修改less-loader版本號，為6.0.0以上

  "devDependencies": {
    "less-loader": "^6.0.0",
  }

然后重新npm i
再重新運行，就解決了

二、配置全局的reset.less

• 新建目錄src/assets/css/reset.less用來存放全局的css變量，或者修改默認的css樣式

• 安裝插件
  npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S

• 在根目錄下創建文件vue.config.js（就是上邊配置全局css哪個）

const path = require('path');
module.exports = {
   // 第三方插件配置
   pluginOptions: {
    'style-resources-loader': {//添加公共得less文件
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/css/reset.less')
      ]
    }
  }
};

奉上參考資料
Vue-cli3.0配置全局less
vue antd 按需加載 報錯.bezierEasingMixin()

轉載請著名出處~
-----*13