Include css file with changing hash number via includeCss

Question

I want to include my main.css file via includeCss in the setup.typoscript. Maybe there is a better option?

 includeCSS {
        svelte_demo_layout = EXT:svelte_demo/Resources/Public/CompiledJavaScript/assets/main.93771f92.css
    }

Vite does the following:

1. Converts my SCSS into CSS
2. Name the css file with hash (e.g. main.93771f92.css)
3. Places into "packages/svelte_demo/Resources/Public/CompiledJavaScript"

My vite.config.js:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [svelte()],
    // root: path.resolve(__dirname, 'src/js'),
    server: {
        host: "0.0.0.0", // leave this unchanged for DDEV!
        port: 5173,
        origin: ''
    },
    publicDir: false, // disable copy `public/` to outDir
    build: {
        // generate manifest.json in outDir
        manifest: true,
        rollupOptions: {
            input: 'packages/svelte_demo/Resources/Private/JavaScript/main.js',
        },
        outDir: 'packages/svelte_demo/Resources/Public/CompiledJavaScript',
    }
})

The problem is that the hash value is changing after every change. Can I use the manifest json file somehow?

{
  "packages/svelte_demo/Resources/Private/JavaScript/main.js": {
    "file": "assets/main.aa79efb7.js",
    "src": "packages/svelte_demo/Resources/Private/JavaScript/main.js",
    "isEntry": true,
    "css": [
      "assets/main.84c4fdb4.css"
    ]
  },
  "packages/svelte_demo/Resources/Private/JavaScript/main.css": {
    "file": "assets/main.84c4fdb4.css",
    "src": "packages/svelte_demo/Resources/Private/JavaScript/main.css"
  }
}

Thank you in advance.

Answer 1

Add the following to vite.config.js, which deletes the hash

output: {
    entryFileNames: `assets/[name].js`,
    chunkFileNames: `assets/[name].js`,
    assetFileNames: `assets/[name].[ext]`
}

setup.typescript:

includeCSS {
    svelte_demo_layout = EXT:svelte_demo/Resources/Public/CompiledJavaScript/assets/main.css
}