vue-cli3使用ant desgin for vue如何自定義主題

官方已經給出了自定義主題的方式，基本上跟着操作就可以了，這裏只是記錄一下幾個重點

官方網址：https://www.antdv.com/docs/vue/customize-theme-cn/

關鍵點記錄：

• 如果項目使用的是scss/sass預處理器，則需要安裝less和less-loader，vue-cli3已經在底層預留了less配置，因此無需查找文件添加配置

​​​​​​​​​​​​​​cnpm install less less-loader --save-dev

• 如果使用了按需引入babel-plugin-import，需要蔣style值改爲true，以便引入less

plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}] // `style: true` 會加載 less 文件
  ]

• vue-cli3覆蓋less變量，需要在vue.config.js配置，所有的變量點擊這裏

css: {
    // requireModuleExtension: false,  // 這句話不能要，否則css樣式不起效
    loaderOptions: {
      less: {
        // 這裏的選項會傳遞給 less-loader
        lessOptions: {
          modifyVars: {
            "primary-color": "#1DA57A",
            "link-color": "#1DA57A",
            "border-radius-base": "2px"
          },
          javascriptEnabled: true // 這句話必須要，否則不起效
        }
      }
    }
  }