Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ant-design-vue custom theme style is invalid

See original GitHub issue

version:

{
    // ...
    "vue": "^3.2.19",
    "ant-design-vue": "^2.2.8",
     "vite": "^2.5.10",
     "unplugin-vue-components": "^0.15.4"
}

vite.config.js:

{
    // ...
    css: {
        preprocessorOptions: {
          less: {
            modifyVars: {
              'primary-color': '#3351c7',
              'border-radius-base': '10px'
            },
            javascriptEnabled: true
          }
        }
    },
    plugins: [
        Components({
          resolvers: [
            AntDesignVueResolver(),
          ],
          dts: true,
          include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.jsx$/]
        })
     ]
}

The component does not change after startup, If I introduce the whole thing in the entry without using unplugin-vue-components, the style will change.

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

14reactions

hjkltopcommented, Oct 19, 2021

importStyle: “less” 可以正常使用自定义样式

0reactions

lifedevercommented, Apr 17, 2022

赞👍

Top Results From Across the Web

Customize Theme - Ant Design

Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, ......

ant design customize theme vue - Stack Overflow

i got my vue3 application setup so far with tailwind, and ant design but can't customize ant design theme ...

Customize Theme - Ant Design Vue

Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand,...

How to Customize Ant Design Theme in a Next.js App

In this tutorial, you'll learn how to customize the default ant design theme to your own theme in just a few steps.

Getting Started - Vue Antd

Create a New Project ... Ant Design Vue is dedicated to providing a good development experience for ... App' import 'ui-vue-antd/dist/antd.css' Vue.config.