vite-plugin-lib-css-injection

An enhancement vite plugin of vite-plugin-libcss that would inject the css file into your bundled js file.

Note

Only support for ESM and library-mode

Install

1pnpm install vite-plugin-lib-css-injection --save -D

Usage

ESM

1import libCss from 'vite-plugin-lib-css-injection'
2import { defineConfig } from 'vite'
3
4export default defineConfig({
5  plugins: [libCss()],
6  build: {
7    lib: {
8      entry: path.resolve(__dirname, './src/main.ts'),
9    },
10    rollupOptions: {
11      output: [
12        {
13          dir: 'dist/esm',
14          format: 'es',
15          entryFileNames: 'index.js',
16        }
17      ],
18    },
19  },
20})

build result like:

1// dist/esm/index.js
2import "./style.css"
3// rest of your bundled js file code

and if there is no rollupOptions but lib.fileName, this plugin will also work!

1lib: {
2  fileName() {
3    return 'esm/index.js'
4  }
5}

build result like:

1// dist/esm/index.js
2import "../style.css"
3// rest of your bundled js file code

That means this plugin will according to the entry filename to change the relative path of css file.

CJS

1// vite.config.js
2const libCss = require('vite-plugin-lib-css-injection')
3
4module.exports = {
5  plugins: [libCss()]
6}