如何通过includeCss引入Vite生成的带动态哈希的CSS文件？

当然可以，这正是Vite生成manifest.json的核心用途之一——通过映射原始文件名和带哈希的构建产物，实现动态获取最新的资源路径，无需手动修改TypoScript配置。下面是具体的实现步骤：

1. 确认Vite的manifest配置正确 #

确保你的vite.config.js中已开启manifest生成，并正确配置入口文件和输出目录：

export default defineConfig({
  build: {
    manifest: true, // 必须开启manifest生成
    outDir: 'public/assets', // 产物输出目录，根据你的项目结构调整
    rollupOptions: {
      input: {
        main: './src/main.scss', // 你的SCSS入口文件路径
      },
    },
  },
});

执行vite build后，会在outDir目录下生成manifest.json，文件内容类似：

{
  "main.scss": {
    "file": "assets/main.abc123.css",
    "src": "main.scss"
  }
}

这个文件记录了原始入口文件和带哈希的最终CSS文件的映射关系。

2. 在TypoScript中动态读取manifest.json #

TypoScript本身无法直接解析JSON，所以需要借助PHP用户函数来读取manifest.json并获取对应路径：

步骤2.1 编写PHP用户函数 #

在你的TYPO3扩展中创建一个用户函数类（比如Vendor\YourExtension\UserFunctions\ViteAsset.php）：

<?php
namespace Vendor\YourExtension\UserFunctions;

use TYPO3\CMS\Core\Core\Environment;

class ViteAsset
{
    public function getAssetFile($content, $conf)
    {
        // 定位manifest.json的路径
        $manifestPath = Environment::getPublicPath() . '/assets/manifest.json';
        
        // 开发环境或manifest不存在时，返回默认文件名作为降级
        if (!file_exists($manifestPath)) {
            return 'main.css';
        }

        // 解析manifest并返回带哈希的文件名
        $manifest = json_decode(file_get_contents($manifestPath), true);
        return $manifest[$content]['file'] ?? 'main.css';
    }
}

步骤2.2 在TypoScript中引用该函数 #

修改setup.typoscript，通过用户函数动态获取CSS路径：

// 定义获取Vite资源路径的用户函数
lib.getViteAssetFile = USER
lib.getViteAssetFile.userFunc = Vendor\YourExtension\UserFunctions\ViteAsset->getAssetFile

// 引入CSS，动态替换哈希路径
page.includeCSS.main = {$siteUrl}assets/{f:cObject(typoscriptObjectPath=lib.getViteAssetFile, data=main.scss)}

其中{$siteUrl}是你在常量中配置的站点根URL（比如https://your-domain.com/）。

3. 区分开发/生产环境（可选） #

开发环境下Vite使用热更新服务器，无需依赖manifest.json，可以通过TypoScript的条件判断切换路径：

// 生产环境：使用manifest获取哈希路径
[applicationContext == "Production"]
    page.includeCSS.main = {$siteUrl}assets/{f:cObject(typoscriptObjectPath=lib.getViteAssetFile, data=main.scss)}
[global]

// 开发环境：直接指向Vite dev服务器的入口文件
[applicationContext == "Development"]
    page.includeCSS.main = {$viteDevUrl}/src/main.scss
[global]

在constants.typoscript中配置Vite开发服务器地址：

viteDevUrl = http://localhost:5173

这样每次Vite构建后，manifest.json会自动更新哈希路径，TypoScript会动态读取最新的路径，完全不需要手动修改配置。

内容的提问来源于stack exchange，提问作者GameOverflow