通过 includeCss 包含具有更改哈希值的 css 文件

Question

我想通过 setup.typoscript 中的 includeCss 包含我的 main.css 文件。也许有更好的选择？

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

Vite 执行以下操作：

1. 将我的 SCSS 转换为 CSS
2. 用哈希命名 css 文件（例如 main.93771f92.css）
3. 放入“packages/svelte_demo/Resources/Public/CompiledJavaScript”

我的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',
    }
})

问题在于每次更改后哈希值都会发生变化。 我可以以某种方式使用清单 json 文件吗？

{
  "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"
  }
}

提前谢谢您。

Answer 1

将以下内容添加到 vite.config.js，这会删除哈希值

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

设置.打字稿：

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