Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Clone https://github.com/Lonli-Lokli/yarn_pnp_scss
yarn install
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