vite-plugin-auto-inject-css

自动注入对应的 Style 文件及 UI 库组件样式，无需关心样式引入问题

助力于组件库开发. 💪

为什么要开发这款插件！！

经常有这样一个场景，每次在使用一个 UI 库时，都要全量引入 Style 文件，或按需手动引入对应的组件 Style.

全量引入可能会存在一些未使到的样式，增加了打包后的体积；按需手动引入又太过于麻烦，容易出错.

本质上 Component 和 Style 应同为一体，在使用时无需在额外引入 Style 而不影响正常使用.

同时，当前社区现有的插件无法满足日常开发需求，一些插件发布时间久远，一直未更新及维护，使用效果不是太好.

1import { ElButton } from 'element-plus';
2
3        ↓ ↓ ↓ ↓ ↓ ↓
4
5import 'element-plus/theme-chalk/el-button.css';
6import { ElButton } from 'element-plus';

📦 安装

1$ npm i vite-plugin-auto-inject-css -D

1$ yarn add vite-plugin-auto-inject-css -D

1$ pnpm add vite-plugin-auto-inject-css -D

API

属性	描述	类型	默认值
mode	以什么样式的模式注入.	dependencies / peerDependencies	dependencies
baseCss	是否注入基础样式.	boolean	true
resolvers	要注入的库列表.	ElementPlusResolver[]	[]

Resolver

属性	描述	类型	默认值
inject	自定义注入样式.	(name?: string) => string | string[]	-

🔨 使用案例

1import { defineConfig, loadEnv } from 'vite'
2import Vue from '@vitejs/plugin-vue'
3import {
4  ElementPlusResolver,
5  createAutoInjectCssPlugin,
6} from 'vite-plugin-auto-inject-css'
7
8export default defineConfig(({ mode }) => {
9  const env = loadEnv(mode, process.cwd())
10  return {
11    server: {
12      open: true,
13      host: true,
14      https: !!env.https,
15    },
16    plugins: [
17      Vue(),
18      createAutoInjectCssPlugin({
19        resolvers: [ElementPlusResolver()],
20      }),
21    ],
22  }
23})

↓ ↓ ↓ ↓ ↓ ↓ 📚

1dist
2├─ assets
3│  ├─ index-Ca3M0RQA.js                # js文件
4│  ├─ index-CwY391-e.css               # 按需打包的UI库组件样式
5├─ index.html                          # 入口 html

库模式 🚀

1import { defineConfig } from 'vite'
2import Vue from '@vitejs/plugin-vue'
3import {
4  ElementPlusResolver,
5  createAutoInjectCssPlugin,
6} from 'vite-plugin-auto-inject-css'
7
8export default defineConfig(() => {
9  return {
10    build: {
11      target: 'es2018',
12      emptyOutDir: true,
13      copyPublicDir: true,
14      lib: {
15        entry: './src/App.vue',
16      },
17      rollupOptions: {
18        external: ['vue', 'element-plus'],
19        output: [
20          {
21            format: 'es',
22            dir: 'es',
23          },
24          {
25            format: 'cjs',
26            dir: 'lib',
27            exports: 'named',
28          },
29        ],
30      },
31    },
32    plugins: [
33      Vue(),
34      createAutoInjectCssPlugin({
35        mode: 'peerDependencies',
36        resolvers: [ElementPlusResolver()],
37      }),
38    ],
39  }
40})

以上打包方式不会在输出目录中生成 style 文件，而是在对应的 chunk 中，以 import 和 require 的方式按需注入在文件顶部.

这对封装第三方组件很有帮助，如：开发一个基于 ElementPlus 的业务组件库，当我们在打包时，无需在对样式重复打包，因为在宿主环境下已经包含了样式文件, 只需引入即可.

这样不仅减小了打包后的体积，同时也避免了在使用时还要再单独引入 style 文件.

前提需设置 mode 参数为 peerDependencies，否则正常生成 style 文件.

↓ ↓ ↓ ↓ ↓ ↓

1import { ElButton } from 'element-plus';
2
3        ↓ ↓ ↓ ↓ ↓ ↓
4
5import 'element-plus/theme-chalk/base.css';
6import 'element-plus/theme-chalk/el-button.css';
7import { ElButton } from 'element-plus';

1const { ElButton } = require('element-plus')
2
3        ↓ ↓ ↓ ↓ ↓ ↓
4
5'use strict';
6require('element-plus/theme-chalk/base.css');
7require('element-plus/theme-chalk/el-button.css');
8const { ElButton } = require('element-plus');

如果当前 style 不属于 UI 库自身的，那么会在输出目录下生成 style 文件并自动注入在对应的 chunk 中.

↓ ↓ ↓ ↓ ↓ ↓

1import './App.css'
2
3或
4
5require('./App.css')

自定义注入样式 🚀

1import { defineConfig } from 'vite'
2import {
3  ElementPlusResolver,
4  createAutoInjectCssPlugin,
5} from 'vite-plugin-auto-inject-css'
6
7export default defineConfig(() => {
8  return {
9    plugins: [
10      createAutoInjectCssPlugin({
11        mode: 'peerDependencies',
12        resolvers: [
13          ElementPlusResolver({
14            inject: (name) => `element-plus/theme-chalk/${name}.css`,
15          }),
16        ],
17      }),
18    ],
19  }
20})

🍵 捐赠

如果您正在使用这个项目或者喜欢这个项目，可以通过以下方式支持我：

• Star、Fork、Watch 一键三连 🚀