attention: I found a better solution to solve this demand, please check out this plugin: vite-plugin-css-injected-by-js
English | 中文
The plugin is used to inject CSS into JS files, so there will not generate CSS files. It is mainly used to pack some libraries with fewer styles, for example, A component that has been encapsulated.
The user using the library will not need to import an additional CSS file.
- Before
import xxxComponent from 'xxx-component';
import 'xxx-component/dist/xxx.css';- Now
import xxxComponent from 'xxx-component';- npm
npm i vite-plugin-style-inject --save-dev- yarn
yarn add -D vite-plugin-style-inject- pnpm
pnpm add -D vite-plugin-style-inject// vite.config.ts
import { defineConfig } from 'vite';
import VitePluginStyleInject from 'vite-plugin-style-inject';
export default defineConfig({
plugins: [VitePluginStyleInject()],
......
});