How to implement custom themes for vue3+vite+antd

1. First, you need to download less and less-loader

npm i less less-loader --save

2. The place where the antd style is introduced should be changed to .less

//Do not use import "ant-design-vue/dist/";//Be careful to use .lessimport "ant-design-vue/dist/"

3. File, find css configuration items

Add the following code

ModifyVars is the theme field you need to customize

Theme style fields can be found from the official website of antdantd official website - custom theme, change it to your own style according to the instructions

// modifyVars is the theme you need to modifycss: {
	preprocessorOptions: {
		less: {
			modifyVars: {
				'primary-color': '#FF763B',
				'border-color-base': '#FF763B',
				'box-shadow-base': '0 2px 8px #FF763B'
			},
			javascriptEnabled: true,
		},
	}
}

Notice:

• 1. Be sure to download less and less-loader packages
• 2、The place where antd style is introduced must be changed to .less

If it does not take effect

Please check the two points you pay attention to

If on-demand introduction is configured, it is necessary tounplugin-vue-componentsBag

Making configuration

npm i unplugin-vue-components

Introduce components and configure them

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [
      	AntDesignVueResolver({ 
      		importStyle: 'less' 
      	})
      ]
    })
  ]
})

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.