vue-cli-3 + ant-desgin-vue 定制主题

参考:https://www.antdv.com/docs/vue/customize-theme-cn/

项目根目录下新建文件vue.config.js

// vue.config.js for less-loader@6.0.0
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',// 全局主色
            'link-color': '#1DA57A',// 链接色
            'border-radius-base': '2px',// 组件/浮层圆角
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

未生效解决方法:

  注意样式必须加载 less 格式,一个常见的问题就是引入了多份样式,less 的样式被 css 的样式覆盖了。

    •   如果在使用 babel-plugin-import 的 style 配置来引入样式,需要将配置值从 'css' 改为 true , 这样会引入 less 文件。
    •   如果是通过  'ant-design-vue/dist/antd.css' 引入样式的,改为 'ant-design-vue/dist/antd.less' 。
原文地址:https://www.cnblogs.com/linjiangxian/p/13203712.html