# vite-plugin-babel-import

**Repository Path**: simbazhang/vite-plugin-babel-import

## Basic Information

- **Project Name**: vite-plugin-babel-import
- **Description**: A vite import plugin for babel.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-23
- **Last Updated**: 2023-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-plugin-babel-import

A vite import plugin for babel.

## install

```bash
npm i vite-plugin-babel-import -D
```

## Example

```js
import { Button } from 'vant';

        ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'vant/es/button';
import 'vant/es/Button/index.css';
```

## Usage

```js
// vite.config.js

// ...
import vitePluginImport from 'vite-plugin-babel-import';
// ...
export default {
  // ...
  plugins: [
    // ...
    vitePluginImport([
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style(name) {
          return `vant/es/${name}/index.css`;
        },
      },
      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style(name) {
          return `element-plus/lib/theme-chalk/${name}.css`;
        },
      },
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style(name) {
          return `ant-design-vue/lib/${name}/style/index.css`;
        },
      },
    ]),
  ],
  // ...
};
```