use the plugin with vite-plugin-import-style, but style not loaded

config as follows:

// main.ts
import { createApp } from 'vue'
// import { Button } from 'ant-design-vue'
// import Antd from 'ant-design-vue'
import App from './App.vue'

import 'virtual:windi.css'

const app = createApp(App);

// app.use(Button)
// app.use(Antd)

app.mount('#root', true)

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, {
  AntDesignVueResolver
} from 'vite-plugin-components'
// import ViteCompression from 'vite-plugin-compression'
import ViteStyleImport from 'vite-plugin-style-import'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default defineConfig({
  // 1. If you are using the ant-design series, you need to configure this
  // 2. Make sure less is installed in the dependency `yarn add less -D`
  css: {
    preprocessorOptions: {
      less: {
        // modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    vue(),

    // https://github.com/antfu/vite-plugin-components
    ViteComponents({
      globalComponentsDeclaration: true,
      customComponentResolvers: [
        AntDesignVueResolver(),
      ]
    }),

    // https://github.com/windicss/vite-plugin-windicss
    WindiCSS(),

    // https://github.com/anncwb/vite-plugin-compression
    // ViteCompression(),

    // https://github.com/anncwb/vite-plugin-style-import
    ViteStyleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`;
          },
        }
      ]
    }),
  ]
})

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

style not generate

what should i do

[ngekoding]

You can use customComponentResolvers with sideEffects option to import the style (no need to use ViteStyleImport).

Here is my config:

// Import kebabCase for formatting
import ViteComponents, { kebabCase } from 'vite-plugin-components'

ViteComponents({
  customComponentResolvers: [
    (name) => {
      if (name.match(/^A[A-Z]/)) { // Ant Design Vue
        const importName = name.slice(1)
        const dirName = kebabCase(importName) // e.g. date-picker
        return { 
          importName, 
          path: 'ant-design-vue/es',
          sideEffects: `ant-design-vue/es/${dirName}/style`,
        }
      } 
    }
  ]
})

The full example of this can be found here https://github.com/ngekoding/vite-project-explore

[ngekoding]

@agoni1212 Ah you are right, after trying that component I got errors. Actually currently I use ElementUI library, so don’t know that problem before, maybe I need make a test for adv next time.