Can't override theme vars with Vue 3 config?

[mitya33]

I'm struggling to override the default colours for Antd. Here's my setup:

package.json

...
  "vue": {
    "css": {
      "loaderOptions": {
        "less": {
          "lessOptions": {
            "modifyVars": {
              "primary-color": "red"
            },
            "javascriptEnabled": true
          }
        }
      }
    }
  }

main.js

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import './assets/css/main.css'
import 'ant-design-vue/dist/antd.css';

//create app
const app = createApp(App)
	.use(Antd)
	.mount('#app')

App.vue

<template>
    <a-button type="primary">Primary Button</a-button> <!-- <-- appears blue, regardless -->
</template>

I have less and less-loader installed (though I'm unsure which, if either, I need). Shouldn't the above change the colour of my button?

Thank you in advance.

[daiwanxing]

@mitya33 hey, you don't need to install less-loader, cuz vite provide built-in support. but the pre-processor itself must be installed.
if you want custom your own theme in ant-design-vue, here have an example may good help you:

// vite.config.js
export default defineConfig({
       css: {
          preprocessorOptions: {
             less: {
                 javascriptEnabled: true,
                 modifyVars: {
                   // all overridable less variables could be found in 
                   // https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less 
                    "@primary-color":  "red",
                 }
             }
          }
       }
})

[daiwanxing]

yep, only need to npm install less and follow abolve example, you can try it.

[daiwanxing]

please refer to the vite docs get more info.

[mitya33]

For whatever reason this is not working for me. The primary colour remains blue. I did exactly what you said:

1. I installed Less i.e. npm i less. I can see it in node_modules.
2. I added a css object to my vite.config.js so the file now looks like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
      preprocessorOptions: {
         less: {
             javascriptEnabled: true,
             modifyVars: {
               // all overridable less variables could be found in 
               // https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less 
                "@primary-color":  "red",
             }
         }
      }
   },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Here's my main.js:

//general prep
import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import './assets/css/main.css'
import 'ant-design-vue/dist/antd.css';
const app = createApp(App)
	.use(Antd)
	.mount('#app')

And finally App.vue:

<template>
	<a-button type="primary">Primary Button</a-button>
</template>

Any idea why this isn't working? Continued thanks.

[daiwanxing]

Oh, I noticed that you imported the style from ant-design-vue/dist/antd.css file. Instead, please import the library style from ant-design-vue/dist/antd.less.

a minor live demo in here: https://codesandbox.io/p/sandbox/late-dew-txstj8?file=%2Fsrc%2FApp.vue%3A26%2C12

[mitya33]

Thank you, yes, I just realised my mistake before reading your post! That works now. Thanks for the help, much appreciated.