Parcel 2 如何为多输出资源配置不同dist-dir（SCSS编译CSS指定输出目录）

现有配置的核心无效点 #

• 顶层全局source字段会覆盖所有命令行传入的入口路径，原配置中设置的source: ["./scss/main.scss"]会导致Parcel完全忽略命令行传入的app.js、shim.js入口，打包流程根本不会处理JS文件，CSS自然无法生成。
• 自定义名为css的target没有和实际入口文件匹配，配置中定义的distDir完全不会生效。
• 单独把scss作为入口传入命令行时，Parcel默认保留源文件的相对目录结构，因此scss/main.scss会被输出到public/scss/main.css，和预期路径不符。
• 非官方的顶层css配置字段不属于Parcel的识别范围，属于无效配置。

可直接落地的正确配置 #

修改package.json的相关配置，删掉所有无效字段，按入口拆分独立target即可：

{
  "name": "embed",
  "scripts": {
    "dev": "parcel serve",
    "build": "parcel build"
  },
  "targets": {
    "js": {
      "distDir": "./public",
      "source": ["./js/app.js", "./js/shim.js"]
    },
    "main": {
      "distDir": "./public/css",
      "source": ["./scss/main.scss"]
    }
  },
  "browserslist": "> 0.2%",
  "devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/preset-env": "^7.13.5",
    "parcel": "next",
    "sass": "^1.32.8"
  },
  "dependencies": {
    "@popperjs/core": "^2.8.3",
    "bootstrap": "^5.0.0-beta2"
  }
}

配置生效逻辑 #

• 每个target块内部自带独立的source入口列表，不需要在package.json顶层写全局source，Parcel启动时会自动加载所有target对应的入口文件，不需要在命令行手动传路径。
• JS对应的target块：指定app.js、shim.js为入口，输出目录指向public根路径，打包后两个JS文件会直接生成在public目录下。
• SCSS对应的target块：main.scss编译后的输出文件名为main.css，自动匹配名为main的target配置，输出目录指向public/css，编译后的CSS文件会直接生成在对应路径下，不会保留原scss目录的层级。
• 运行npm run dev或npm run build后，最终生成的目录结构和预期完全一致。

补充说明 #

如果不需要将SCSS作为独立入口，也可以直接在app.js顶部添加import '../scss/main.scss'，让SCSS跟随JS流程打包；但这种方式生成的CSS文件名会和JS入口同名，也就是app.css，无法直接生成main.css存放在独立的css目录下，灵活性不如独立target配置。

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