unplugin-vue-components自动导入样式

覆盖默认配置，让它能找到src/components下的入口文件，而非.vue文件

resolve.ts

import type { ComponentResolver } from 'unplugin-vue-components'

export function Resolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^([A-Z]|b-[a-z])/)) {
        let fileName = strToLowerCase(name)
        
        return {
          name,
          from: `@/components`,
          sideEffects: [
            '@/scss/index.scss',
            `@/scss/${fileName}.scss`
          ]
        }
      }
    },
  }
}

// 大驼峰转小驼峰
function strToLowerCase(str: string, split = '-') {
  str = str.replace(/([A-Z])/g, `${split}$1`).toLowerCase()
  return str.slice(1)
}

vite.config.ts

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { Resolver } from './src/components/resolve'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      globs: ['src/components/'],
      resolvers: [
        Resolver()
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Card/index.ts

import Card from './Card.vue'
export default Card
export { Card }