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:

Converts my SCSS into CSS
Name the css file with hash (e.g. main.93771f92.css)
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.

Diego Borba · Accepted Answer · 2023-11-14 12:06:46Z

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
}

edited Nov 14, 2023 at 12:06

Diego Borba

2,4356 gold badges15 silver badges29 bronze badges

answered Nov 11, 2023 at 11:27

GameOverflow

217 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Include css file with changing hash number via includeCss

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related