升级Parcel.js至2.12.0后，.tsx文件CSS导入失效求助

问题根源 #

Parcel 2.12.x版本调整了CSS资源的默认处理逻辑，对非CSS Modules的全局样式导入解析规则做了变更，导致原本自动识别的全局CSS导入未被正确打包。

解决方案 #

1. 显式配置Parcel的CSS处理规则

在项目根目录创建或修改.parcelrc文件，指定CSS文件的转换器和打包器：

{
  "transformers": {
    "*.css": ["@parcel/transformer-css"]
  },
  "packagers": {
    "*.css": "@parcel/packager-css"
  }
}

该配置强制Parcel使用官方CSS工具链处理所有.css文件，确保全局样式被正确注入构建产物。

2. 明确标记全局CSS导入

在TSX文件的CSS导入语句后添加特殊注释，告知Parcel这是全局样式而非CSS Modules：

import "./app.css" /* parcel: css */;

此方式可绕过Parcel对CSS Modules的自动检测，强制按全局样式规则处理。

3. 验证入口文件依赖链

确保index.html中正确引入app.tsx，且使用ES模块类型：

<script type="module" src="./app.tsx"></script>

Parcel需通过入口文件追踪所有依赖资源，引入方式错误会导致TSX中的CSS依赖未被解析。

4. 清理缓存后重新构建

执行以下命令彻底清理缓存并重新构建：

rm -rf .parcel-cache dist
parcel index.html

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