svelte-material-ui
svelte-material-ui copied to clipboard
Published
20 hours ago •
hperrin
hperrin
Typography Mixin Error with Sveltekit
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:
- Create a new sveltekit project
- Add svelte-material-ui
- 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"
}
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;
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/
