`@use` & `@include` doesn't work by default with yarn 3 / berry

[Lonli-Lokli]

Bug report

Actual Behavior

Build error with Yarn 3 & @use or @include usage (related to https://github.com/webpack-contrib/sass-loader/issues/802)

Expected Behavior

No build errors

How Do We Reproduce?

1. Clone https://github.com/Lonli-Lokli/yarn_pnp_scss
2. yarn install
3. yarn build

✔ Browser application bundle generation complete.

./src/styles.scss - Error: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-01a772c5dc/0/cache/sass-loader-npm-12.6.0-19096ee50d-5d73a42858.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @include meta.load-css('tippy.js/dist/tippy.css');
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 5:1  root stylesheet

Same code with @import works

// DO NOT WORK
@use 'sass:meta';

@include meta.load-css('tippy.js/dist/tippy.css');
@include meta.load-css('tippy.js/themes/light.css');
@include meta.load-css('tippy.js/animations/scale.css');

// WORKS
// @import 'tippy.js/dist/tippy.css';
// @import 'tippy.js/themes/light.css';
// @import 'tippy.js/animations/scale.css';

System info

System:
   OS: Windows 10 10.0.22000
   CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
   Memory: 8.64 GB / 15.78 GB
 Binaries:
   Node: 14.18.2 - C:\Program Files\nodejs\node.EXE
   Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
   npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
 Browsers:
   Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.71)
   Internet Explorer: 11.0.22000.120

Angular CLI: 14.0.6
Node: 14.18.2
Package Manager: yarn 3.2.1
OS: win32 x64

Angular: 14.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.6 (cli-only)
@angular-devkit/build-angular   14.0.6
@angular-devkit/core            14.0.6 (cli-only)
@angular-devkit/schematics      14.0.6 (cli-only)
@schematics/angular             14.0.6 (cli-only)
rxjs                            7.5.6
typescript                      4.7.4

[alexander-akait]

Sounds like tippy.js is not compatiblity with yarn pnp v3, sorry we can't fix it here

[Lonli-Lokli]

@alexander-akait can you please explain how package can be treated as compatibl ?

[Lonli-Lokli]

@alexander-akait I've tried with another package normalize.css (same repository with new commit) but still getting an error. What are the requirements for the package to be compatibl with Yarn PnP?

/src/styles.scss - Error: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-01a772c5dc/0/cache/sass-loader-npm-12.6.0-19096ee50d-5d73a42858.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @include meta.load-css('normalize.css');
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 4:1  root stylesheet

./src/styles.scss - Error: Module build failed (from ./.yarn/__virtual__/mini-css-extract-plugin-virtual-f6948fdae4/0/cache/mini-css-extract-plugin-npm-2.6.0-c3e21a6a16-ea73bd6655.zip/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-01a772c5dc/0/cache/sass-loader-npm-12.6.0-19096ee50d-5d73a42858.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @include meta.load-css('normalize.css');
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 4:1  root stylesheet

[alexander-akait]

@Lonli-Lokli sorry for misleading, I mean meta.load-css doesn't support yarn PnP, sounds like this function dont's node.js logic resolution, that is why you have problems, but everything works fine with @import

[alexander-akait]

I think better to ask sass team here, we just register own importer (it supports aliases, PnP and more resolver options) and sass execute it on each @import/@use and etc, if something was not resolved it means sass doesn't run our importer (or has bugs)

[Lonli-Lokli]

Can you point me to the correct repository for this issue?

[alexander-akait]

https://github.com/sass/dart-sass

[Lonli-Lokli]

@alexander-akait I am trying to create a siplified reproduction for dart-sass team, and it appears I cannot make @use work with relarive path even with npm.

Maybe you can explain why this code do not work? // works @import '~tippy.js/dist/tippy.css';

// produce an error @use '~tippy.js/dist/tippy.css';

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~tippy.js/dist/tippy.css';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 1:1  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~tippy.js/dist/tippy.css';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

[alexander-akait]

Sass just not run our importer on @use, because all something.css (ending on CSS) files considered as CSS

[alexander-akait]

Closing due to inactivity. Need fix on Sass side.