Build scss into css, find it via the manifest

[WhyNotHugo]

I have a web application which includes a set of Vue SFC. Only a few specific pages have any Vue components in them, and the rest have no JS.

My Vue setup also compiles a standalone SCSS into CSS. All pages depend on the styles defined in this file, so the CSS is included globally, while JS scripts are only included in specific pages.

Until Vue 3.3 + Vite 4.5, I've been ensuring that this SCSS gets compiled into a standalone CSS, locating it via manifest.json, and including it in all pages.

When upgrading to Vue 3.4 + Vite 6.2, I find that the CSS files are no longer included in the manifest in the same way. If I understand correctly, they're now loaded via JS instead. They won't load for me on pages that include no JS; I still need to include it myself by finding it in the manifest.

I feel like I've been hacking my way around this situation on each upgrade, so I'm looking for advise on a recommended approach for my use case.

TLDR: How can I configure vite to compile a specific scss file into a css and keep include it in manifest.json?

Context

My current vite.config.js (partially migrated as indicated above) looks something like this:

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import svgPlugin from "unplugin-svg-vue-component/vite"; import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; export default defineConfig({ build: { // generate manifest.json in outDir manifest: "manifest.json", rollupOptions: { input: [ "src/admin.ts", "src/coupon-amount-selector.ts", "src/editor.ts", "src/main.ts", "src/photo-manager.ts", "src/pickup-map.ts", "src/product-variant-selector.ts", ], }, }, plugins: [ vue(), svgPlugin({ optimize: true }), // See: https://github.com/vuejs/core/issues/9347 cssInjectedByJsPlugin({ cssAssetsFilterFunction: (outputAsset) => { return ( // Keep public.css as a regular css file. This ensure that it is // loaded even on older browsers or clients with no JS capability. !outputAsset.fileName.startsWith("assets/main-") && // Also keep admin.scss separate, otherwise it somehow ends up // getting injected into non-admin scripts. !outputAsset.fileName.startsWith("assets/admin-") ); }, jsAssetsFilterFunction: (outputChunk) => { return outputChunk.isEntry; } }), ], // Enable devtools. See: https://github.com/vuejs/devtools/issues/1330#issuecomment-1337294343 define: { __VUE_PROD_DEVTOOLS__: true, }, });