import files not being resolved using sass-embedded implementation that are being resolved by sass implementation
debugwand opened this issue · comments
Bug report
Actual Behavior
When using the sass-embedded
implementation, if there is a dependency that has been installed as a sub-dependency of a package rather than in node_modules root, this is not found when other files have a repeated imported scss file. This scss file could be nothing to do with affected package.
This doesn't happen when you use sass
or when the imported scss file is only imported once.
There seems to be a difference in the value of prev
in the getWebpackImporter
function in the utils.js
file when running the different implementations - there are 2 files in the PoC mentioned below that show the different output.
Error message is:
ERROR in ./src/main.scss (./src/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
Apologies if this is not in fact a sass-loader
issue, it's not clear where exactly the issue is.
Expected Behavior
@import files should be found regardless of whether you are using sass-embedded
or sass
implementations, or importing a sass file in two different places
How Do We Reproduce?
PoC: https://github.com/debugwand/sass-embedded-bug/tree/main - README.md has full details
Please paste the results of npx webpack-cli info
here, and mention other relevant information
System:
OS: macOS 14.5
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 30.69 MB / 32.00 GB
Binaries:
Node: 18.20.3 - ~/.volta/tools/image/node/18.20.3/bin/node
npm: 10.7.0 - ~/.volta/tools/image/npm/10.7.0/bin/npm
Browsers:
Safari: 17.5
Packages:
css-loader: ^7.1.2 => 7.1.2
sass-loader: ^14.2.1 => 14.2.1
webpack: ^5.91.0 => 5.91.0
webpack-cli: ^5.1.4 => 5.1.4
Sorry I can't reproduce, using require("sass")
and require("sass-embedded")
give me the same result - error and in both cases
Can't find stylesheet to import.
╷
3 │ @import '@somenamespace/depz/main';
ok, I'll close this and re-open when I've got it sorted
sorted - my settings in .gitignore caused all the node_modules folders to be ignored, including the one I wanted to include :/
this now works as described, sorry for any inconvenience.
Bug in sass-embedded
.
When we use sass
we have:
From /home/akait/IdeaProjects/sass-embedded-bug/src/main.scss try to resolve @somenamespace/mainSass/main.scss
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/mainSass/main.scss try to resolve @somenamespace/depx/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/depx/main.scss try to resolve @somenamespace/dep0/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/mainSass/main.scss try to resolve @somenamespace/depy/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/depy/main.scss try to resolve @somenamespace/dep0/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/mainSass/main.scss try to resolve @somenamespace/depz/main
Looks at the latest line, it is valid, because we have @somenamespace/depz/main
in @somenamespace/mainSass/main.scss
But when we use sass-embedded
we have:
From /home/akait/IdeaProjects/sass-embedded-bug/src/main.scss try to resolve @somenamespace/mainSass/main.scss
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/mainSass/main.scss try to resolve @somenamespace/depx/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/depx/main.scss try to resolve @somenamespace/dep0/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/mainSass/main.scss try to resolve @somenamespace/depy/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/depy/main.scss try to resolve @somenamespace/dep0/main
From /home/akait/IdeaProjects/sass-embedded-bug/@somenamespace/depy/main.scss try to resolve @somenamespace/depz/main
The last line is wrong, we don't have @somenamespace/depz/main
in @somenamespace/depy/main
.
Where did I get these values from?
From - https://github.com/webpack-contrib/sass-loader/blob/master/src/utils.js#L709, it is sass
/sass-embedded
loader API (https://sass-lang.com/documentation/js-api/types/legacyasyncimporter/) and prev
is wrong for sass-embedded
Even more if you try to use api: "modern-compiler",
or api: "modern",
it is still broken
Please open an issue in sass-embedded
repo, I can't fix it here, but it is a serious bug on sass-embedded
side, they pass wrong prev
, behaviour between sass
and sass-embedded
for legacy API should be the same
Feel free to feedback
/cc @nex3
Can you provide a standalone reproduction for the sass-embedded bug? I'm having trouble understanding the full context with all the webpack stuff going on.
Thanks both. I'll see what I can do for a standalone and open a bug in the sass-embedded repo. I've a couple of other items to get done at work first so it will likely be next week.