Cannot import SCSS from Node.js modules with Yarn 2 (Yarn PnP)

[joelmukuthu]

Describe the bug
Importing SCSS from Node.js modules does not work with Yarn 2.

<style lang="scss">
  @import "demo-scss-npm-module";
</style>

Yields:

Error: Can't find stylesheet to import.
  ╷
2 │   @import "demo-scss-npm-module";
  │           ^^^^^^^^^^^^^^^^^^^^^^
  ╵
  foo.svelte 2:11

To Reproduce
See this repo: https://github.com/joelmukuthu/svelte-preprocess-yarn-2-scss-bug

Expected behavior
That the external SCSS would be imported. This currently works with Yarn 1.

Stacktraces

Webpack output

[webpack-cli] Compilation finished
assets by status 1.98 KiB [cached] 1 asset
./foo.svelte 39 bytes [built] [code generated] [1 error]

ERROR in ./foo.svelte
Module build failed (from ./.yarn/$$virtual/svelte-loader-virtual-fc743d5c72/0/cache/svelte-loader-npm-2.13.6-8655b244a1-84b6908665.zip/node_modules/svelte-loader/index.js):
Error: Can't find stylesheet to import.
  ╷
2 │   @import "demo-scss-npm-module";
  │           ^^^^^^^^^^^^^^^^^^^^^^
  ╵
  foo.svelte 2:11  root stylesheet
    at Object._newRenderError (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:13472:19)
    at Object._wrapException (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:13315:16)
    at _render_closure1.call$2 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:79617:21)
    at _RootZone.runBinary$3$3 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:27035:18)
    at _FutureListener.handleError$1 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:25563:19)
    at _Future__propagateToListeners_handleError.call$0 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:25860:49)
    at Object._Future__propagateToListeners (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:4539:77)
    at _Future._completeError$2 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:25693:9)
    at _AsyncAwaitCompleter.completeError$2 (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:25036:12)
    at Object._asyncRethrow (./foo/.yarn/cache/sass-npm-1.29.0-9787eb1c3f-8114e0c4e7.zip/node_modules/sass/sass.dart.js:4288:17)

Information about your project:

• Your operating system: Ubuntu Linux 20.04

• svelte-preprocess version: 4.6.1

• The project uses Webpack, but it's inconsequential since I can reproduce the same error with the Svelte for VSCode extension. The currently-latest version of svelte-loader doesn't support Webpack 5, but this issue happens before svelte-loaders incompatibility kicks in.

[yjp20]

I have some demo code that works with Yarn 2. Currently, importing SCSS for yarn 2 is broken because the built in tilde importer for scss assumes that "node_modules" exists. Writing a custom importer can get over that problem.

// rollup.config.js importing section
import pnpapi from "pnpapi";
import { PosixFS, ZipOpenFS } from "@yarnpkg/fslib";
import libzip from "@yarnpkg/libzip";

// rollup.config.js preprocess configuration
    svelte({
      preprocess: sveltePreprocess({
        scss: {
          importer: (url, prev, done) => {
            const zipOpenFs = new ZipOpenFS({ libzip: libzip.getLibzipSync() });
            const crossFs = new PosixFS(zipOpenFs);
            const res = pnpapi.resolveRequest(url, __dirname + "/");
            const file = crossFs.readFileSync(res);
            done({ contents: file.toString() });
          },
        },
      }),
    }),

Hope this helps for anyone else having this problem. I'd be willing to merge a fix using this into the default tilde importer, but before that I would like to know if any of the maintainers think this is a good direction to move in.