在Parcel v2构建中内联Svelte CSS且避免生成重复文件

要实现将Svelte的CSS、JS全部打包进单个index.html，消除单独生成的index.css文件，按以下步骤操作：

1. 确认Svelte编译配置与转换器设置 #

确保你的.svelterc配置正确，且Parcel使用的转换器能识别该配置：

• .svelterc保持原有配置：

{
  "compilerOptions": {
    "css": "injected"
  }
}

• 在.parcelrc中指定使用parcel-transformer-svelte3-plus转换器（你已验证该转换器能识别编译选项）：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svelte": ["parcel-transformer-svelte3-plus"]
  }
}

2. 禁用Parcel的CSS提取功能 #

Parcel默认会将CSS提取为单独文件，需显式禁用：

方式一：通过命令行参数 #

修改package.json中的build脚本：

"scripts": {
  "build": "parcel build index.html --no-extract-css"
}

方式二：通过Parcel配置 #

在package.json根节点添加Parcel配置：

"parcel": {
  "css": {
    "extract": false
  }
}

3. 清理缓存并重新构建 #

执行以下命令清除Parcel缓存，避免旧文件干扰：

parcel clean

随后重新执行build命令：

npm run build

完成后，Parcel会将Svelte的CSS通过JS动态注入到页面，不再生成单独的index.css文件，最终只输出单个index.html。

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