[JavaScript知识库]vite配置ant design vue3按需引入后自定义主题色失效

使用 unplugin-vue-components/vite 和 unplugin-vue-components/resolvers 内的 AntDesignVueResolver 进行 antdv 组件的按需引入，但是会导致 antdv 的自定义主题失效。

然而 antdv 官网在自定义主题的地方，并没有写 vite 里面如何处理，虽然处理方式和 vue-cli 相似，但是在使用 AntDesignVueResolver 按需引入后，自定义主题色并没有按预期生效。

网上有人的处理办法是 ，在 main.ts 内全量引入 import 'ant-design-vue/dist/antd.less'，这不符合我们按需引入的预期，也不优雅。

解决办法：

1. 更改主题色配置，开启 less

   ...
   css: {
     preprocessorOptions: {
       less: {
         modifyVars: {
           "primary-color": "#000",
           "link-color": "red"
         },
         javascriptEnabled: true
       }
     }
   },
   ...
   

2. AntDesignVueResolver 增加配置

   plugins: [
   	...
        Components({
          resolvers: [
            AntDesignVueResolver({
              importStyle: "less", //<--------看这行
            })
          ]
        }),
   	...
   ],
   

重启项目，第一次会久一点

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖