Browse Source

feat: inject CSS into JS bundle to auto-load component styles

hechang27-sprt 6 months ago
parent
commit
9089dfc477
  1. 13
      package-lock.json
  2. 1
      package.json
  3. 3
      vite.config.ts

13
package-lock.json generated

@ -36,6 +36,7 @@
"terser": "^5.44.1", "terser": "^5.44.1",
"typescript": "~5.9.3", "typescript": "~5.9.3",
"vite": "^7.3.0", "vite": "^7.3.0",
"vite-plugin-css-injected-by-js": "^3.5.2",
"vite-plugin-dts": "^4.5.4" "vite-plugin-dts": "^4.5.4"
} }
}, },
@ -8930,7 +8931,6 @@
"version": "4.0.3", "version": "4.0.3",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@ -10012,6 +10012,7 @@
"version": "4.54.0", "version": "4.54.0",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
}, },
@ -11332,6 +11333,16 @@
} }
} }
}, },
"node_modules/vite-plugin-css-injected-by-js": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.2.tgz",
"integrity": "sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"vite": ">2.0.0-0"
}
},
"node_modules/vite-plugin-dts": { "node_modules/vite-plugin-dts": {
"version": "4.5.4", "version": "4.5.4",
"dev": true, "dev": true,

1
package.json

@ -113,6 +113,7 @@
"terser": "^5.44.1", "terser": "^5.44.1",
"typescript": "~5.9.3", "typescript": "~5.9.3",
"vite": "^7.3.0", "vite": "^7.3.0",
"vite-plugin-css-injected-by-js": "^3.5.2",
"vite-plugin-dts": "^4.5.4" "vite-plugin-dts": "^4.5.4"
}, },
"eslintConfig": { "eslintConfig": {

3
vite.config.ts

@ -2,6 +2,7 @@ import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import legacy from "@vitejs/plugin-legacy"; import legacy from "@vitejs/plugin-legacy";
import dts from "vite-plugin-dts"; import dts from "vite-plugin-dts";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import { resolve } from "path"; import { resolve } from "path";
export default defineConfig(({ command, mode }) => { export default defineConfig(({ command, mode }) => {
@ -14,6 +15,8 @@ export default defineConfig(({ command, mode }) => {
}, },
plugins: [ plugins: [
vue(), vue(),
// Inject CSS into JS for library builds
isLibBuild && cssInjectedByJsPlugin(),
// Only use legacy plugin for app builds, not library builds // Only use legacy plugin for app builds, not library builds
!isLibBuild && !isLibBuild &&
legacy({ legacy({

Loading…
Cancel
Save