Bundle JS and CSS into single file with Vite

by

Two steps,

  • We can inject css into js assets with vite-plugin-css-injected-by-js.
  • We can emit a single js asset by disabling chunks in rollup’s config.

Final result,

import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({
  plugins: [cssInjectedByJsPlugin()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
});

As suggested by @TheRockerRush below, you may want to use vite-plugin-singlefile to bundle all code into a single .html file, although the OP is asking for a single .js file.

Leave a Comment