Maybe a bug with 8.0.0-beta.2?

[kevinFeng0106]

Describe the bug
i'm using svelte with npm create vite@latest and i did not choose sveltekit

when i use a @use statement like this:

@use '@smui/paper/mixins' as paper;

it ends up an error:

[sass] Error: Error: Missing "./mixins" specifier in "@smui/paper" package
  ╷
4 │ @use '@smui/paper/mixins' as paper;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

but when i use @use stament to import the @material/theme like this:

@use '@material/theme/color-palette';

it works nice without error

Expected behavior
@use '@smui/paper/mixins' as paper; can work without an error

Screen shots
this is the @smui/paper package directory, and i find it has a _mixins.scss file

what's the reason for this problem and how to solve it? thanks

[netzwerch]

I got the same issue and got it solved.

You most likely also used the code from the example:
https://github.com/hperrin/svelte-material-ui/blob/master/packages/site/src/routes/demo/paper/_Colored.scss

The code from this file needs to go into the _smui-theme.scss, then after running npm run prepare you can do<Paper color="custom-error"> or use any other name you used as the first parameter in @include paper.paper-color(... ,... ,...).

[kevinFeng0106]

@netzwerch it seems it doesn't work
when i run pnpm run prepare, it occurs an error:

Error: Can't find stylesheet to import.
  ╷
3 │ @use '@material/theme/color-palette';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\theme\_smui-theme.scss 3:1                                                            @use
  ..\..\node_modules\.pnpm\[email protected]\node_modules\smui-theme\_index.scss 1:1  root stylesheet
    at Object.wrapException (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:2286:43)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:101159:19)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$baseUrl (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:101178:19)
    at _EvaluateVisitor__loadModule_closure4.call$0 (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:103104:19)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:102629:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:102635:19)
    at _EvaluateVisitor1._evaluate0$_loadModule$7$baseUrl$configuration$namesInErrors (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:100516:13)
    at _EvaluateVisitor1._evaluate0$_loadModule$5$configuration (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:100519:19)
    at _EvaluateVisitor1.visitUseRule$1 (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:101520:13)
    at UseRule0.accept$1$1 (E:\学校\软件体系结构\comprehensive-experiment\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:123143:22) {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    "3 │ @use '@material/theme/color-palette';\n" +
    '  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src\\theme\\_smui-theme.scss 3:1                                                            @use\n' +
    '  ..\\..\\node_modules\\.pnpm\\[email protected]\\node_modules\\smui-theme\\_index.scss 1:1  root stylesheet',
  line: 3,
  column: 1,
  file: 'E:\\学校\\软件体系结构\\comprehensive-experiment\\apps\\frontend\\src\\theme\\_smui-theme.scss',
  status: 1
}

Node.js v18.20.2
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

i think it's because of pnpm