Cannot import Sass modules from node_modules: "Error: Can't find stylesheet to import."

[Biboba]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• [ X] Read the docs.
• [X ] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• [ X] This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

Trying to import sass module from an mdc component, using the following syntax:

@use "@material/icon-button";

I get the following error:

 Error: Can't find stylesheet to import.
 @use "@material/icon-button";
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

To fix it, I need to specify the node_modules folder, like this:

@use "node_modules/@material/icon-button";

I tried to configure the "includePath" in vite.config.js, but it does not solve the issue or maybe my syntax is not correct ?:

  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ["node_modules"]
      }
    }
  }

It looks pretty much like #291 which was solved. Could it be a regression maybe ?

Reproduction

1. Init app with npm init @vitejs/appvanilla option
2. Install Sass preprocessor: npm install -D sass
3. Install MDC component: npm install @material/icon-button
4. Rename style.css file to style.scss
5. In main.js, rename file import from 'style.css' to 'style.scss'
6. and import icon-button sass file ```@use "node_modules/@material/icon-button";````
7. Run npm run dev

The error appears.

System Info

• vite version: 2.0.5
• Operating System: MacOS Catalina
• Node version: 15.7.0
• Package manager (npm/yarn/pnpm) and version: npm 7.4.3

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

Thanks for your help !

[sodatea]

Vite doesn't recognize _index.scss as the main file.

[58bits]

Also just came across this when installing material-components-web

The workaround, for any @use statement that depends on _index.scss - is to append index to the import.

For example...

@use "@material/theme/index" with (
  $primary: white,
  $secondary: #285c86,
  $on-primary: white,
  $on-secondary: white,
  $background: #17243b,
  $surface: #17243bc7,
);

Or...

@use '@material/button/index' as button;

[roger6106]

I have some cases where I can't seem to use the workaround with material-components-web. Here's an example:

@import 'node_modules/@material/data-table/mixins';

This returns the following error:

Can't find stylesheet to import.
  ╷
1 │ @forward "@material/animation" as mdc-animation-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@material/data-table/_mixins.import.scss 1:1  @import
  src/theme/_index.scss 1:9                                  root stylesheet

Since the imported file is also trying to import additional packages, it runs into the same issue of not recognizing _index.scss.

[roger6106]

This is caused by vite always using package.json to determine which file to load. In the case of SASS, this will usually (if not always) lead to the wrong file being included.

[Shinigami92]

Using @use "@material/icon-button"; in style.scss I can confirm I can reproduce this bug

9:09:10 AM [vite] Internal server error: Can't find stylesheet to import.
  ╷
1 │ @use "@material/icon-button";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  style.scss 1:1  root stylesheet
  Plugin: vite:css
  File: /Users/christopher/OpenSource/vite-repros/issue-2499/style.scss
  Error: Can't find stylesheet to import.
    ╷
  1 │ @use "@material/icon-button";
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    style.scss 1:1  root stylesheet
      at Object._newRenderError (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:13190:19)
      at Object._wrapException (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:13018:16)
      at _render_closure1.call$2 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:81626:21)
      at _RootZone.runBinary$3$3 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:27456:18)
      at _FutureListener.handleError$1 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:26005:19)
      at _Future__propagateToListeners_handleError.call$0 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:26303:49)
      at Object._Future__propagateToListeners (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:4544:77)
      at _Future._completeError$2 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:26135:9)
      at _AsyncAwaitCompleter.completeError$2 (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:25789:12)
      at Object._asyncRethrow (/Users/christopher/OpenSource/vite-repros/issue-2499/node_modules/sass/sass.dart.js:4343:17)

After applying #3627 I only get a deprecation warning:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum))

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
49 │   @return math.max($backLum, $foreLum) / math.min($backLum, $foreLum);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@material/theme/_theme-color.scss 49:11   contrast()
    node_modules/@material/theme/_theme-color.scss 60:19   tone()
    node_modules/@material/theme/_theme-color.scss 73:14   contrast-tone()
    node_modules/@material/theme/_theme-color.scss 115:17  @use
    node_modules/@material/theme/_theme.scss 35:1          @use
    node_modules/@material/ripple/_ripple.scss 33:1        @use
    node_modules/@material/icon-button/_mixins.scss 29:1   @forward
    node_modules/@material/icon-button/_index.scss 2:1     @use
    style.scss 1:1                                         root stylesheet

But this is not related to vite anymore if I understand correctly
So the bug itself is fixed