Bug report

When using pnpm's default isolated dependencies installation mode, dependencies are not necessarily reachable from the originating stylesheet's directory, and instead need to be resolved from where they originated. This is mainly an issue with the sass-loader, which inlines all referenced URLs as though they occur in the source sass file.

Actual Behavior

Suppose you have the following file structure:

.
└── node_modules
    └── foo
        ├── hello.scss
        └── node_modules
            └── bar
                └── example.svg

hello.scss has a url('~bar/example.svg') which is now unresolvable for any importer of hello.scss. In short, the issue is that the css-loader expects a flat node_modules where everything is hoisted, but pnpm specifically does not do this.

Expected Behavior

I think there are two options:

1. Provide a way for users to define a query string parameter in the url('...') statement that the loader will use as the context when resolving any given URL. A sass importer could then be contributed back to the sass-loader which rewrites URLs with the appropriate context embedded in URLs.
2. Leverage the same algorithm used by the resolve-url-loader (or enhance that loader) to leverage sourcemaps for determining what the context is for any given URL.

How Do We Reproduce?

Please see the explanation above for an example layout that causes this issue.

Please paste the results of npx webpack-cli info here, and mention other relevant information