Set assets path for `exports` property in package.json-CodePudding

I noticed that since Angular 13 Webpack started to add exports property to the package.json. And it breaks my library package. That is because there are SCSS and asset files in the library and those are consumed by @import statement by the apps. The compiler can't resolve SCSS and assets. I managed to find the correct path pattern for SCSS files:

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

But when I try to do something similar with assets I fail. Here are some of the combinations I tried:

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

The only combination which works for me is when I specify the full path to a particular asset. So this works:

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

The error is as follows:

./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)

Of corse I can specify explicitly every asset file in the the assets path, but I got more than 500 files. And that doesn't look right. Does anyone know what is the proper way specifying all asset files in a particular directory recursively? Thanks you!

CodePudding user response：

I've found the answer. The issue occurred because the assets were referred from inside the library using the package name instead of the relative path. Let's say here is a package structure:

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

Then here is how the font was referred to from 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")    
}

and here is how it should be referred:

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

With this fix there is no need to specify assets in the exports property of the libs's package.json at all.