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
pnpm install vite-plugin-lib-css-injection --save -DUsage
ESM
import libCss from 'vite-plugin-lib-css-injection'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [libCss()],
build: {
lib: {
entry: path.resolve(__dirname, './src/main.ts'),
},
rollupOptions: {
output: [
{
dir: 'dist/esm',
format: 'es',
entryFileNames: 'index.js',
}
],
},
},
})build result like:
// dist/esm/index.js
import "./style.css"
// rest of your bundled js file codeand if there is no rollupOptions but lib.fileName, this plugin will also work!
lib: {
fileName() {
return 'esm/index.js'
}
}build result like:
// dist/esm/index.js
import "../style.css"
// rest of your bundled js file codeThat means this plugin will according to the entry filename to change the relative path of css file.
CJS
// vite.config.js
const libCss = require('vite-plugin-lib-css-injection')
module.exports = {
plugins: [libCss()]
}