Nx postcss config can't resolve assets imports inside an npm package

I'm getting an error in a react monorepo with Nx (v17)

The error is that when I import the styles from an npm package (.scss), I get the error that it is not possible to resolve the internal imports it makes of fonts and assets. I have already checked that the files exist and indeed, they do exist and the import paths used are correct, but it still cannot resolve them.

As far as I understand the problem is of the postcss-loader so I think I would have to modify that configuration inside the webpack.config.js file but I am not sure.

This is the error:

ERROR in ./src/app/components/Chip/Chip.scss (./src/app/components/Chip/Chip.scss.webpack
[javascript/auto]!=!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[5].use[1]!
../../node_modules/@nx/webpack/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6]
.oneOf[5].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[5].use[3]!./src/app/components/Chip/Chip.scss)
Module Error (from ../../node_modules/@nx/webpack/node_modules/postcss-loader/dist/cjs.js):
/Users/angelda/projects/app-web/node_modules/guidelines-2.0/src/styles/_checkbox.scss:64:10: 
Can't resolve '../assets/mol-checkbox-selected-disabled.svg' in
 '/Users/angelda/projects/app-web/apps/app-web/src/app/components/Chip'

The import of the resource '../assets/mol-checkbox-selected-disabled.svg' is done in "node_modules/guidelines-2.0/src/styles/_checkbox.scss"

style imports look like this:

@import "~guidelines-2-0/src/styles/_mixins.scss"
@import "~guidelines-2-0/src/styles/_checkbox.scss"

I have tried to modify the webpack configuration but have been unsuccessful.

In the end the solution was to add the paths in the resolve.fallback key of my webpack configuration:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { merge } = require('webpack-merge');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`

  return merge(config, {
    resolve: {
      fallback: {
        '../assets': 'node_modules/gbm-guidelines-2.0/src/assets',
        fonts: 'node_modules/guidelines-2.0/src/styles/fonts',
      },
    },
  });
});

I also had a problem where I had the following error in development:

ERROR in Conflict: Multiple assets emit different content to the same filename Mabry-Regular.svg

ERROR in Conflict: Multiple assets emit different content to the same filename MabryPro-Bold.svg

Solution:

// project.json

{
  ...
  "build": {
    ...
    "configurations": {
       ...
       "development": {
          ...
          "outputHashing": "all"
       }
    }
  }
}