Vue3+Antd 修改antd主题色，配置全局css

一、修改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