Can't find stylesheet to import after upgrading to modern API

xavierfoucrier commented 2 months ago

Hello @alexander-akait 👋

I noticed a weird behavior after ugprading to sass-loader 16: some paths imported with @use need to be updated to make the build complete properly. If not, some stylesheets can't be found.

Basic example with three files:

styles/index.scss is doing @use 'utils/build' ✅
styles/utils/build.scss is doing @use 'utils/debug ⚠️
styles/utils/debug.scss

⚠️ This is not working, relative path are expected instead, like @use debug, because debug.scss is just near build.scss

May be it's now supposed to work as is with new modern API. But doing so, I am having some paths that looks like ../../../../utils/build sometimes... which is clearly not convenient.

Adding api: 'legacy' fixes the issue for the moment.

Here is my sass-loader configuration:

{
  loader: 'sass-loader',
  options: {
    api: 'legacy',
    sassOptions: {
      includePaths: ['src/assets/styles'],
    },
  },
},

Let me know if you need a minimal reproductible test repository to have a look 👀

alexander-akait commented 2 months ago

Let me know if you need a minimal reproductible test repository to have a look 👀

Will be great, I think the bug on sass side, need a code to debug

xavierfoucrier commented 2 months ago

Let's build it, I will share with you asap 😎

xavierfoucrier commented 2 months ago

Hello @alexander-akait 👋

I just invited you to join a private minimal test repository called sass-loader-issue. Shortly: git pull + npm i + npm run build = you will see an error in the console.

Let me know if you need further stuff, thanks! 😎

alexander-akait commented 2 months ago

You need to use:

sassOptions: {
  loadPaths: ['src/assets/styles'],
},

instead:

sassOptions: {
  includePaths: ['src/assets/styles'],
},

due https://github.com/webpack-contrib/sass-loader/releases/tag/v16.0.0

The sass options are different for the legacy (before) and modern APIs. Please look at docs how to migrate to the modern options.

xavierfoucrier commented 2 months ago

@alexander-akait okay, simple as that! 🔥

Sorry my fault on this, even if I had a look at the migration guide, I did not took attention to includePaths renamed to loadPaths.. clearly useless this option renaming, but anyway, it's working ✨

Thanks for having a look! I am keeping the private repository as is for future issue debugging with you or sass team 😎

webpack-contrib / sass-loader

Can't find stylesheet to import after upgrading to modern API #1230