SCSS does not detect _index.scss

[roger6106]

Describe the bug
When importing SCSS, the _index.scss stylesheet is not detected. This prevents many @material packages from working. The stack traces appear to show errors from either sass or vite, depending on which package is imported. I'm not sure if this is 1 issue or 2 separate issues.

I have tried customizing import paths and using replace to work around this, but I have not yet been able to make it work.

To Reproduce
Reproduction at https://github.com/roger6106/svelte-bug.

Run npm run dev.

The file src/routes/_index.scss contains the code that triggers the errors (see stacktraces below).

Expected behavior
The scss should be loaded, and my elements should have the material styling.

Stacktraces

@import "@material/data-table/mixins";

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/routes/_index.scss 7:9                                 root stylesheet
    at Object._newRenderError (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:13190:19)
    at Object._wrapException (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:13018:16)
    at _render_closure1.call$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:81626:21)
    at _RootZone.runBinary$3$3 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:27456:18)
    at _FutureListener.handleError$1 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26005:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26303:49)
    at Object._Future__propagateToListeners (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:4544:77)
    at _Future._completeError$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26135:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:25789:12)
    at Object._asyncRethrow (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:4343:17)

@import "@material/data-table";

Error: Can't find stylesheet to import.
   ╷
29 │ @import "@material/data-table";
   │         ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/routes/_index.scss 29:9  root stylesheet
    at Object._newRenderError (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:13190:19)
    at Object._wrapException (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:13018:16)
    at _render_closure1.call$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:81626:21)
    at _RootZone.runBinary$3$3 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:27456:18)
    at _FutureListener.handleError$1 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26005:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26303:49)
    at Object._Future__propagateToListeners (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:4544:77)
    at _Future._completeError$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:26135:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:25789:12)
    at Object._asyncRethrow (/Users/roger/Downloads/my-app/node_modules/sass/sass.dart.js:4343:17)

@import "@material/theme"; // vite error

@import "@material/theme/_index.scss"; // working alternative

/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:32563
        throw new Error(`Failed to resolve entry for package "${id}". ` +
              ^

Error: Failed to resolve entry for package "@material/theme". The package may have incorrect main/module/exports specified in its package.json.
    at resolvePackageEntry (/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:32563:15)
    at tryNodeResolve (/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:32382:11)
    at Context.resolveId (/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:32265:28)
    at Object.resolveId (/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:44211:55)
    at async Object.<anonymous> (/Users/roger/Downloads/my-app/node_modules/vite/dist/node/chunks/dep-e9a16784.js:69885:27)

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers
  System:
  OS: macOS 11.4
  CPU: (8) arm64 Apple M1
  Memory: 138.70 MB / 8.00 GB
  Shell: 5.8 - /bin/zsh
  Binaries:
  Node: 16.1.0 - /opt/homebrew/bin/node
  npm: 7.11.2 - /opt/homebrew/bin/npm
  Browsers:
  Firefox: 88.0.1
  Safari: 14.1.1
  npmPackages:
  @sveltejs/kit: next => 1.0.0-next.109
  svelte: ^3.34.0 => 3.38.2

• Your browser
  Safari: 14.1.1

• Your adapter (e.g. Node, static, Vercel, Begin, etc...)
  npm run dev

Severity
Currently blocking usage of SvelteKit. I was using Svelte, but started converting to SvelteKit due to needing routing. I can create manual routing in Svelte for now, but I would prefer a solution that still allows me to use SvelteKit.

[roger6106]

I'm not entirely sure if it's the same issue as this: vitejs/vite#2499. If it is, I'm hoping SvelteKit at least has some kind of a workaround I can implement.

[roger6106]

This is resolved in Vite 2.5.0, released a few hours ago. Once that's merged we should be able to close this issue.

[ignatiusmb]

Closing as SvelteKit is now using Vite v2.5.0 and above.