为package.json中的' exports '属性设置资产路径

Question

我注意到，从Angular 13开始，Webpack开始在package.json中添加exports属性。它破坏了我的库包。这是因为库中有SCSS和资产文件，这些文件由应用程序的@import语句消耗。编译器不能解析SCSS和资产。我设法找到SCSS文件的正确路径模式:

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

但是当我试图做一些类似的assets我失败了。以下是我尝试过的一些组合:

"./assets/*": "./**/*",
---
"./assets/*": {
"asset": "./*"
},
---
"./assets/*": {
"asset": ["./assets/fonts/materialicons/*"]
},

唯一适合我的组合是当我指定完整路径到特定资产时。

"./assets/*": "./assets/fonts/materialicons/MaterialIcons-Outlined.woff2",   

错误如下:

./apps/contacts-app/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./apps/contacts-app/src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
path_to_dir/repo_name/apps/contacts-app/src/styles.scss:362:13: Package path ./assets/fonts/materialicons/MaterialIcons-Outlined.woff2 is not exported from package path_to_dir/repo_name/node_modules/@namespace/my-lib (see exports field in path_to_dir/repo_name/node_modules/@namespace/my-lib/package.json)

当然，我可以显式地指定资产路径中的每个资产文件，但我有超过500个文件。这看起来不对。有人知道什么是正确的方式指定所有资产文件在一个特定的目录递归?谢谢你!

Answer 1

我找到答案了。出现这个问题是因为资源是从库内部使用包名而不是相对路径引用的。假设这是一个包结构:

@namespace/my-lib
|-> scss/src/main.scss
|-> assets/fonts/materialicons/MaterialIcons-Outlined.woff2

然后是如何从main.scss:

引用字体的

@font-face {
font-weight: 400;
font-family: "Material Icons Outlined";
font-style: normal;
src: url("~@namespace/my-lib/assets/fonts/materialicons/MaterialIcons-Outlined.woff2") format("woff2")    
}

，下面是它的引用方式:

@font-face {
font-weight: 400;
font-family: "Material Icons Outlined";
font-style: normal;
src: url("../../assets/fonts/materialicons/MaterialIcons-Outlined.woff2") format("woff2")    
}

有了这个修复，就不需要在lib包的exports属性中指定assets了。