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