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' 。