vite配置ant design vue3按需引入后自定义主题色失效

使用 unplugin-vue-components/viteunplugin-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", //<--------看这行
             })
           ]
         }),
    	...
    ],
    

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

你可能感兴趣的:(技巧,vue.js,vite,ant,design,vue3)