Giters

webpack-contrib / sass-loader

Compiles Sass to CSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

import files not being resolved using sass-embedded implementation that are being resolved by sass implementation

debugwand opened this issue · comments

commented

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

commented

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';
commented

ok, I'll close this and re-open when I've got it sorted

commented

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.

commented

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

commented

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.

commented

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.