如何在package.json的exports字段中配置资源文件路径？

碰到Angular 13之后Webpack自动给package.json加上exports字段，导致类库的资源文件没法被项目解析的问题？已经搞定SCSS的配置，但资源文件批量配置一直失败，总不能500多个文件挨个写吧？直接用下面的配置就能解决：

正确的资源目录exports配置 #

在类库的package.json的exports里，用递归通配符覆盖整个assets目录（包括所有子目录和文件）：

"exports": {
  // 你已经配置好的SCSS规则
  "./scss/*": {
    "sass": "./scss/*.scss"
  },
  // 批量匹配assets下所有资源
  "./assets/**": "./assets/**"
}

如果需要更精细的控制（比如区分不同资源类型），也可以拆成两级通配符：

"exports": {
  "./scss/*": { "sass": "./scss/*.scss" },
  "./assets/*": "./assets/*",
  "./assets/**/*": "./assets/**/*"
}

之前的配置为啥不行？ #

你试的几种写法都有问题：

• "./assets/*": "./**/*"：通配符范围太广，会匹配根目录所有文件，Webpack没法正确映射到assets下的资源
• 用"asset"作为导出条件：这不是Webpack/Node.js支持的标准导出条件（标准的是import/require/sass这类），所以解析失败
• 数组写法"asset": ["./assets/fonts/materialicons/*"]：不符合exports的通配符匹配逻辑，没法批量生效

验证配置 #

配置完之后，项目里正常引用资源就没问题了：

// 引用SCSS
@import '@namespace/my-lib/scss/main';
// 引用字体资源
@font-face {
  font-family: 'Material Icons';
  src: url('@namespace/my-lib/assets/fonts/materialicons/MaterialIcons-Outlined.woff2') format('woff2');
}

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