Typography Mixin Error with Sveltekit

[nminchow]

Describe the bug I can't seem to use @material/typography/mdc-typography or @material/typography/mixins in my _smui-theme.scss file on a new sveltekit project without getting an error. When I try to include the helpers, I get the error below. I'm new to svelte and sveltekit, so I may be missing something simple, but I'm not sure what to try!

To Reproduce Steps to reproduce the behavior:

1. Create a new sveltekit project
2. Add svelte-material-ui
3. Attempt to use typography helpers

Error

  node_modules\@material\theme\_index.scss 1:1  @use
  src\theme\_smui-theme.scss 8:1                @use
  node_modules\smui-theme\_index.scss 1:1       root stylesheet
    at Object.wrapException (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:1237:17)
    at _EvaluateVisitor1._evaluate0$_execute$5$configuration$namesInErrors$nodeWithSpan (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:82357:19)
    at _EvaluateVisitor__loadModule_closure4.call$0 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:84319:24)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:83933:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:83939:19)
    at _EvaluateVisitor1._evaluate0$_loadModule$7$baseUrl$configuration$namesInErrors (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:82323:13)
    at _EvaluateVisitor1._evaluate0$_loadModule$4 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:82329:19)
    at _EvaluateVisitor1.visitForwardRule$1 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:82724:15)
    at ForwardRule0.accept$1$1 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:86972:22)
    at ForwardRule0.accept$1 (D:\projects\advocate-ai\frontend\node_modules\sass\sass.dart.js:86975:19) {
  formatted: `Error: This module was already loaded, so it can't be configured using "with".\n` +
    '   ┌──> node_modules\\@material\\theme\\_index.scss\n' +
    "1  │ ┌ @forward './theme-color' show\n" +
    '2  │ │   $background,\n' +
    '3  │ │   $error,\n' +
    '4  │ │   $primary,\n' +
    '5  │ │   $on-error,\n' +
    '6  │ │   $on-primary,\n' +
    '7  │ │   $on-secondary,\n' +
    '8  │ │   $on-surface,\n' +
    '9  │ │   $secondary,\n' +
    '10 │ │   $surface,\n' +
    '11 │ │   accessible-ink-color,\n' +
    '12 │ │   contrast,\n' +
    '13 │ │   contrast-tone,\n' +
    '14 │ │   luminance,\n' +
    '15 │ │   text-emphasis,\n' +
    '16 │ │   tone;\n' +
    '   │ └──────^ new load\n' +
    '   ╵\n' +
    '   ┌──> node_modules\\@material\\theme\\_theme.scss\n' +
    "32 │   @use './theme-color';\n" +
    '   │   ━━━━━━━━━━━━━━━━━━━━ original load\n' +
    '   ╵\n' +
    '   ┌──> src\\theme\\_smui-theme.scss\n' +
    "8  │ ┌ @use '@material/theme/index' as theme with (\n" +
    '9  │ │   $primary: #ff3e00,\n' +
    '10 │ │   $secondary: #676778,\n' +
    '11 │ │   $surface: #fff,\n' +
    '12 │ │   $background: #fff,\n' +
    '13 │ │   $error: color-palette.$red-900\n' +
    '14 │ │ );\n' +
    '   │ └─^ configuration\n' +
    '   ╵\n' +
    '  node_modules\\@material\\theme\\_index.scss 1:1  @use\n' +
    '  src\\theme\\_smui-theme.scss 8:1                @use\n' +
    '  node_modules\\smui-theme\\_index.scss 1:1       root stylesheet',
  line: 1,
  column: 1,
  file: 'D:\\projects\\advocate-ai\\frontend\\node_modules\\@material\\theme\\_index.scss',
  status: 1
}

Additional context package.json:

{
    "name": "frontend",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "prepare": "yarn smui-theme",
        "smui-theme": "smui-theme compile static/smui.css -i src/theme"
    },
    "devDependencies": {
        "@material/typography": "^14.0.0",
        "@smui/data-table": "^7.0.0-beta.3",
        "@smui/icon-button": "^7.0.0-beta.3",
        "@smui/layout-grid": "^7.0.0-beta.3",
        "@smui/top-app-bar": "^7.0.0-beta.3",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.5.0",
        "sass": "^1.62.0",
        "smui-theme": "^7.0.0-beta.3",
        "svelte": "^3.54.0",
        "svelte-check": "^3.0.1",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.2.0"
    },
    "type": "module"
}

[02rasjac]

I got the same error, but it seems like I manage to fix it by simply moving @use "@material/typography/index"; to be the last @use-statement.

This gives the error:

@use "sass:color";

@use "@material/typography/index" as typography;
@use "@material/theme/color-palette";

// Svelte Colors!
@use "@material/theme/index" as theme with (
  $primary: #ff3e00,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900
);

but not this:

@use "sass:color";

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

// Svelte Colors!
@use "@material/theme/index" as theme with (
  $primary: #ff3e00,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900
);

@use "@material/typography/index" as typography;

[Max-Makhrov]

I got the same error, but it seems like I manage to fix it by simply moving @use "@material/typography/index"; to be the last @use-statement.

This gives the error:

@use "sass:color";

@use "@material/typography/index" as typography;
@use "@material/theme/color-palette";

// Svelte Colors!
@use "@material/theme/index" as theme with (
  $primary: #ff3e00,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900
);

but not this:

@use "sass:color";

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

// Svelte Colors!
@use "@material/theme/index" as theme with (
  $primary: #ff3e00,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900
);

@use "@material/typography/index" as typography;

Wow, this should be the official version, the one described on the tutorial page is wrong:

https://sveltematerialui.com/demo/typography/