@vavt/vite-plugin-auto-import-style

按需引用组件时，自动引入样式。

| 属性名 | 类型 | 默认值 | 说明 | | -------------- | ----------------- | -------------------------------------- | -------------------------------- | | prefix | string | Vl | 组件前缀，比如： VlButton | | importStyle | 'css' \| 'scss' | css | 引入的样式类型，也是样式文件后缀 | | libName | string | @vavt/lib | 组件库名称 | | fileExtensions | string[] | ['.vue', '.js', '.ts', '.jsx', '.tsx'] | 允许引入的文件类型 |

支持的库目录结构

dist/
├── css/
│   ├── button.css
│   ├── input.css
├── scss/
│   ├── button.scss
│   ├── input.scss

Usage

• Install

  yarn add @vavt/vite-plugin-auto-import-style -D

• Config

  vite.config.ts

  import { defineConfig } from 'vite';
  import { autoImportStyle } from '@vavt/vite-plugin-auto-import-style';
  
  export default defineConfig({
    plugins: [autoImportStyle()],
  });

  <template>
    <VlCard>卡片</VlCard>
  </template>
  <script setup>
  import { VlCard } from '@vavt/lib';
  </script>

  转换为

  <template>
    <VlCard>卡片</VlCard>
  </template>
  <script setup>
  import { VlCard } from '@vavt/lib';
  import '@vavt/lib/dist/css/card.css';
  </script>