This repository was archived by the owner on Aug 28, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Aug 28, 2026. It is now read-only.
url resolutions for tilde prefixes fail with pnpm's isolated dependencies #1507
Description
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:
- 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. - 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.
Activity
[-]URL and Import resolutions for tilde prefixes fail with pnpm's isolated dependencies[/-][+]@url and @import resolutions for tilde prefixes fail with pnpm's isolated dependencies[/+][-]@url and @import resolutions for tilde prefixes fail with pnpm's isolated dependencies[/-][+]url resolutions for tilde prefixes fail with pnpm's isolated dependencies[/+]alexander-akait commentedon Mar 24, 2023
Sorry, not related to css loader, it was dicussed a lot of time, please ask developers to provide variables to set path(s) to assets (for example bootstrap and tialwind do it), also you can use
alias/roots/fallbackand otherresolveroption to fix it, there are a lot of various technicians too, you can write a custom loader, also~is deprecated and should be not used (except very exotic cases)If you provide an example where you have problems I can help you to setup it and we can improve our docs so other developers will not have such problems
sgarfinkel commentedon Mar 24, 2023
As far as I know aliases can’t be set dynamically in one loader then passed to another, can they? If that’s the case then maybe I can use an importer on the sass side to pass that along to the css loader.
alexander-akait commentedon Mar 27, 2023
No, you need to list all of them, but you need it, can you provide a real use case?
We pass loader context in sass-loader to importer so - yes, you can use it, you even create own resolver with own logic and resolve whatever you want, but the main question - why a lot of heavy code if you just set
alias/fallbackor ask developers to add variables for assets (or fork a project if it is old and add required logic)