Vite 中文文档

vite-plugin-style-import


English| 中文

A plug-in that imports component library styles on demand

Why only import styles


Because vite itself has imported the component library on demand, only the style is not on demand, so just import the style on demand.

Install (yarn or npm)


node version:>=12.0.0

vite version:>=2.0.0

  1. ``` sh
  2. yarn add vite-plugin-style-import -D

  4. ```

or

  1. ``` sh
  2. npm i vite-plugin-style-import -D

  4. ```

Effect


  1. ``` ts
  2. import { Button } from 'ant-design-vue';

  4.         ↓ ↓ ↓ ↓ ↓ ↓

  6. import { Button } from 'ant-design-vue';
  7. import 'ant-design-vue/es/button/style/index.js';
  8. ```

  1. ``` ts
  2. import { ElButton } from 'element-plus';

  4.         ↓ ↓ ↓ ↓ ↓ ↓

  6. // dev
  7. import { Button } from 'element-plus';
  8. import 'element-plus/lib/theme-chalk/el-button.css`;

  10. // prod
  11. import Button from 'element-plus/lib/el-button';
  12. import 'element-plus/lib/theme-chalk/el-button.css';
  13. ```

Usage


Config plugin in vite.config.ts

  1. ``` ts
  2. import { UserConfigExport } from 'vite'
  3. import {
  4.   createStyleImportPlugin,
  5.   AndDesignVueResolve,
  6.   VantResolve,
  7.   ElementPlusResolve,
  8.   NutuiResolve,
  9.   AntdResolve,
  10. } from 'vite-plugin-style-import'

  12. export default (): UserConfigExport => {
  13.   return {
  14.     // 1. If you are using the ant-design series, you need to configure this
  15.     // 2. Make sure less is installed in the dependency `yarn add less -D`
  16.     css: {
  17.       preprocessorOptions: {
  18.         less: {
  19.           javascriptEnabled: true,
  20.         },
  21.       },
  22.     },
  23.     plugins: [
  24.       createStyleImportPlugin({
  25.         resolves: [
  26.           AndDesignVueResolve(),
  27.           VantResolve(),
  28.           ElementPlusResolve(),
  29.           NutuiResolve(),
  30.           AntdResolve(),
  31.         ],
  32.         libs: [
  33.           // If you don’t have the resolve you need, you can write it directly in the lib, or you can provide us with PR
  34.           {
  35.             libraryName: 'ant-design-vue',
  36.             esModule: true,
  37.             resolveStyle: (name) => {
  38.               return `ant-design-vue/es/${name}/style/index`
  39.             },
  40.           },
  41.         ],
  42.       }),
  43.     ],
  44.   }
  45. }
  46. ```

Options


param type default description
:--- :--- :--- :---
include string、RegExp、(string、RegExp)[]、null、undefined `['*/.js', '*/.ts', '*/.tsx', '*/.jsx']` Code directory and file format to be converted
exclude string、RegExp、(string、RegExp)[]、null、undefined `'node_modules/'` Excluded files/folders
libs Lib[] List of libraries to be imported
resolves Lib[] List of libraries to be imported (built-in by the plugin)

Lib

  1. ``` ts
  2. {
  3.   // Import names that meet this rule will take effect. The default is null, which can be applied to resolveComponent and resolveStyle at the same time
  4.   importTest?: Regexp;

  6.   // Need to imported  library name
  7.   libraryName: string;

  9.   // Custom style file conversion
  10.   resolveStyle: (name: string) => string;

  12.   // Name conversion for library export
  13.   // default: paramCase
  14.   libraryNameChangeCase?: LibraryNameChangeCase;

  16.   // If the style file is not .css suffix. Need to turn on this option
  17.   // default: false
  18.   esModule?: boolean;

  20.   /**
  21.    * There may be some component libraries that are not very standardized.
  22.    * You can turn on this to ignore to determine whether the file exists. Prevent errors when importing non-existent css files.
  23.    * Performance may be slightly reduced after it is turned on, but the impact is not significant
  24.    * default: false
  25.    */
  26.   ensureStyleFile?: boolean;

  28. }

  30. // LibraryNameChangeCase

  32. export type LibraryNameChangeCase = ChangeCaseType | ((name: string) => string);

  34. export type ChangeCaseType =
  35.   | 'camelCase'
  36.   | 'capitalCase'
  37.   | 'constantCase'
  38.   | 'dotCase'
  39.   | 'headerCase'
  40.   | 'noCase'
  41.   | 'paramCase'
  42.   | 'pascalCase'
  43.   | 'pathCase'
  44.   | 'sentenceCase'
  45.   | 'snakeCase';

  47. ```

Example


Run Example

  1. ``` shell
  2. pnpm install
  3. cd packages/playground/basic
  4. pnpm run dev
  5. pnpm run build
  6. ```

Sample project


Vben Admin

License


MIT