Comments (8)
hperrin
commented on September 26, 2024
It already works with Svelte 4 (51d2411). Is there a specific problem you're seeing?
from svelte-material-ui.
mugu-fatman
commented on September 26, 2024
Yes, getting this error , any help is appreciated
Error: Can't find stylesheet to import.
╷
36 │ @use '@material/list/mixins' as list-mixins;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\@material\drawer\_mixins.scss 36:1 @forward
node_modules\@material\drawer\_index.scss 2:1 @use
ClientApp\src\theme\_smui-theme.scss 167:1 @use
node_modules\smui-theme\_index.scss 1:1 root stylesheet
at Object.wrapException (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:1267:17)
at Object.throwWithTrace0 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:23924:15)
at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:83502:13)
at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$baseUrl (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:83509:19)
at _EvaluateVisitor__loadModule_closure4.call$0 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84914:21)
at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84540:25)
at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84546:19)
at _EvaluateVisitor1._evaluate0$_loadModule$7$baseUrl$configuration$namesInErrors (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:82929:13)
at _EvaluateVisitor1._evaluate0$_loadModule$5$configuration (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:82932:19)
at _EvaluateVisitor1.visitUseRule$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:83772:13) {
formatted: "Error: Can't find stylesheet to import.\n" +
' ╷\n' +
"36 │ @use '@material/list/mixins' as list-mixins;\n" +
' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
' ╵\n' +
' node_modules\\@material\\drawer\\_mixins.scss 36:1 @forward\n' +
' node_modules\\@material\\drawer\\_index.scss 2:1 @use\n' +
' ClientApp\\src\\theme\\_smui-theme.scss 167:1 @use\n' +
' node_modules\\smui-theme\\_index.scss 1:1 root stylesheet',
line: 36,
column: 1,
file: 'C:\\Users\\mugu\\Projects\\Frontier\\Frontier\\Fatman.Frontier.App\\node_modules\\@material\\drawer\\_mixins.scss',
status: 1
}
Node.js v18.16.0
from svelte-material-ui.
hperrin
commented on September 26, 2024
Can you show me what your _smui-theme.scss file looks like, and your package.json's dependencies? It look like you're just missing a dependency, but I'm wondering why it wasn't installed automatically by npm.
from svelte-material-ui.
mugu-fatman
commented on September 26, 2024
@use '@material/theme/index' as theme with (
$primary: $primary-75,
$on-primary: #ffffff,
$secondary: #ffffff,
$on-secondary: #787878,
$background: #fbfbfb,
$surface: #fff,
$on-surface: $dark-purple-grey,
$error: #cb0033,
$on-error: $dark-purple-grey,
);
@use "@material/shape" with (
$small-component-radius: $border-radius,
$medium-component-radius: $border-radius,
$large-component-radius: 0px
);
@use "@material/elevation";
@use "@material/typography" with (
$font-family: unquote("Quicksand, Arial, Helvetica, sans-serif"),
$styles-headline1: (
font-size: 36px,
font-weight: 700,
color: $heading-color,
line-height: 48px,
margin-top: 0,
margin-bottom: 0
),
$styles-headline2: (
font-size: 24px,
font-weight: 700,
color: $heading-color,
line-height: 32px,
margin-top: 0,
margin-bottom: 0
),
$styles-headline3: (
font-size: 20px,
font-weight: 400,
color: $heading-color,
line-height: 25px,
margin-top: 0,
margin-bottom: 0
),
$styles-headline4: (
font-size: 16px,
font-weight: 700,
color: $heading-color,
line-height: 20px,
margin-top: 0,
margin-bottom: 0
),
$styles-headline5: (
font-size: 16px,
font-weight: 600,
color: $heading-color,
line-height: 20px,
margin-top: 0,
margin-bottom: 0
),
$styles-button: (
text-transform: none,
font-size: 16px,
font-weight: 600
),
$styles-subtitle1: (
font-size: 16px,
font-weight: 400,
),
$styles-subtitle2: (
font-size: 12px,
font-weight: 600,
),
$styles-body1: (
font-size: 16px,
font-weight: 400,
color: $body-text-color
),
$styles-body2: (
font-size: 14px,
font-weight: 400,
)
);
@use "@material/ripple" with (
$dark-ink-opacities: $ripple-opacities
);
@use "@material/layout-grid" with (
$default-margin: (
desktop: 64px,
tablet: 32px,
phone: 16px,
),
$default-gutter: (
desktop: $desktop-gutter,
tablet: 24px,
phone: 16px,
)
);
@use "@material/floating-label" with (
$float-scale: 0.875
);
@use "@material/top-app-bar" with (
$section-vertical-padding: 16px,
$section-horizontal-padding: 32px
);
@use "@material/top-app-bar/mdc-top-app-bar";
@use '@material/button';
@use '@material/icon-button' with (
$icon-size: 30px
);
@use "@material/drawer" with (
$divider-opacity: 1
);
@use "@material/list";
@use "@material/drawer/mdc-drawer";
@use "@material/tab-bar";
@use "@material/tab";
@use "@material/tooltip";
@use "@material/select" with (
$outlined-idle-border: $input-border-color,
$outlined-hover-border: $input-hover-border-color,
$height: $input-height,
$label-color: $heading-color,
$disabled-label-color: $heading-color,
$ink-color: $input-text-color,
$disabled-ink-color: $disabled-text-color,
$dropdown-icon-color: $icon-default,
$disabled-fill-color: $disabled-fill-color,
$disabled-outline-color: $input-border-color
);
@use "@material/data-table" with (
$header-row-text-color: $heading-color,
$row-text-color: $table-text-color,
$header-row-height: 56px,
$row-height: 72px,
$cell-leading-padding: 12px,
$cell-trailing-padding: 12px,
$divider-size: 0px,
$row-hover-fill-color: $primary-15
);
@use "@material/radio" with (
$baseline-theme-color: theme.$primary,
$unchecked-color: theme.$on-secondary,
$disabled-circle-color: $input-hover-border-color
);
@use "@material/checkbox";
@use "@material/notched-outline";
@use "@material/textfield" with (
$outlined-idle-border: $input-border-color,
$outlined-hover-border: $input-hover-border-color,
$disabled-border: $input-border-color,
$outlined-disabled-border: $input-border-color,
$textarea-border: $input-border-color,
$textarea-disabled-border-color: $input-border-color,
$height: $input-height,
$label: $heading-color,
$disabled-label-color: $heading-color,
$ink-color: $input-text-color,
$disabled-ink-color: $disabled-text-color,
$background: theme.$surface,
$disabled-background: $disabled-fill-color
);
@use '@material/dialog' with (
$scrim-color: theme.$on-surface,
$scrim-opacity: 0.05
);
@use '@material/typography/mdc-typography';
_smui-theme.scss
"devDependencies": {
"@ctrl/tinycolor": "^3.4.1",
"@material/typography": "^14.0.0",
"@mdi/js": "^7.1.96",
"@smui/button": "^7.0.0-beta.14",
"@smui/card": "^7.0.0-beta.14",
"@smui/checkbox": "^7.0.0-beta.14",
"@smui/chips": "^7.0.0-beta.14",
"@smui/circular-progress": "^7.0.0-beta.14",
"@smui/common": "^7.0.0-beta.14",
"@smui/data-table": "^7.0.0-beta.14",
"@smui/dialog": "^7.0.0-beta.14",
"@smui/drawer": "^7.0.0-beta.14",
"@smui/floating-label": "^7.0.0-beta.14",
"@smui/form-field": "^7.0.0-beta.14",
"@smui/icon-button": "^7.0.0-beta.14",
"@smui/layout-grid": "^7.0.0-beta.14",
"@smui/list": "^7.0.0-beta.14",
"@smui/notched-outline": "^7.0.0-beta.14",
"@smui/radio": "^7.0.0-beta.14",
"@smui/segmented-button": "^7.0.0-beta.14",
"@smui/select": "^7.0.0-beta.14",
"@smui/snackbar": "^7.0.0-beta.14",
"@smui/switch": "^7.0.0-beta.14",
"@smui/tab": "^7.0.0-beta.14",
"@smui/tab-bar": "^7.0.0-beta.14",
"@smui/textfield": "^7.0.0-beta.14",
"@smui/tooltip": "^7.0.0-beta.14",
"@smui/top-app-bar": "^7.0.0-beta.14",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.22.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/svelte": "^4.0.3",
"@testing-library/user-event": "^14.3.0",
"@types/cookie": "^0.5.1",
"@types/file-saver": "^2.0.5",
"@types/jest": "^28.1.6",
"@types/papaparse": "^5.3.2",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"c8": "^7.12.0",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"file-saver": "^2.0.5",
"i18next": "^22.4.5",
"i18next-http-backend": "^2.2.2",
"joi": "^17.6.0",
"jsdom": "^20.0.0",
"msw": "^0.47.4",
"papaparse": "^5.3.2",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"sass": "^1.63.4",
"smui-theme": "^7.0.0-beta.14",
"svelte": "^4.0.1",
"svelte-check": "^3.4.6",
"svelte-dnd-action": "^0.9.19",
"svelte-preprocess": "^5.0.3",
"svelte-time": "0.7.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.0",
"typescript": "^4.8.0",
"vite": "^4.4.9",
"vitest": "^0.19.1"
},
"type": "module",
"dependencies": {
"@fontsource/fira-mono": "^4.5.8",
"@lukeed/uuid": "^2.0.0",
"cookie": "^0.5.0",
"svelty-picker": "^4.1.3"
}
package.json
from svelte-material-ui.
mugu-fatman
commented on September 26, 2024
Installed some material dependencies
"dependencies": {
"@fontsource/fira-mono": "^4.5.8",
"@lukeed/uuid": "^2.0.0",
"@material/list": "^14.0.0",
"@material/select": "^14.0.0",
"@material/tab-scroller": "^14.0.0",
"cookie": "^0.5.0",
"svelty-picker": "^4.1.3"
}
But still getting some error
Error: There is no module with the namespace "theme".
╷
194 │ $baseline-theme-color: theme.$primary,
│ ^^^^^^^^^^^^^^
╵
ClientApp\src\theme\_smui-theme.scss 194:25 @use
node_modules\smui-theme\_index.scss 1:1 root stylesheet
at Object.wrapException (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:1267:17)
at Object.throwWithTrace0 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:23924:15)
at _EvaluateVisitor1._evaluate0$_addExceptionSpan$1$3$addStackFrame (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84614:13)
at _EvaluateVisitor1._evaluate0$_addExceptionSpan$2 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84620:19)
at _EvaluateVisitor1._evaluate0$_expressionNode$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84464:19)
at _EvaluateVisitor1.visitUseRule$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:83766:40)
at UseRule0.accept$1$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:101494:22)
at UseRule0.accept$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:101497:19)
at _EvaluateVisitor1.visitStylesheet$1 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:83082:16)
at _EvaluateVisitor__execute_closure1.call$0 (C:\Users\mugu\Projects\Frontier\Frontier\Fatman.Frontier.App\node_modules\sass\sass.dart.js:84979:10) {
formatted: 'Error: There is no module with the namespace "theme".\n' +
' ╷\n' +
'194 │ $baseline-theme-color: theme.$primary,\n' +
' │ ^^^^^^^^^^^^^^\n' +
' ╵\n' +
' ClientApp\\src\\theme\\_smui-theme.scss 194:25 @use\n' +
' node_modules\\smui-theme\\_index.scss 1:1 root stylesheet',
line: 194,
column: 25,
file: 'C:\\Users\\mugu\\Projects\\Frontier\\Frontier\\Fatman.Frontier.App\\ClientApp\\src\\theme\\_smui-theme.scss',
status: 1
}
Node.js v18.16.0
from svelte-material-ui.
mugu-fatman
commented on September 26, 2024
@hperrin could you please provide some inputs on this
from svelte-material-ui.
hperrin
commented on September 26, 2024
I mean based on the _smui-theme file you showed me, I don't know why you'd get that error. I guess you should try moving your primary color into its own variable in that file, then you can use that instead of theme.$primary.
from svelte-material-ui.
hperrin
commented on September 26, 2024
I'm going to close this because I don't really know what the problem is, but it doesn't look like a problem with SMUI. Let me know if that workaround doesn't work.
from svelte-material-ui.
Related Issues (20)
- `Error: Package path ./internal is not exported` in smui v7 HOT 23
- Panel with variant="outlined" Restricts Nested Dialogs to Panel Size
- Form elements should have name property
- fix missing-exports-condition HOT 4
- Expose cursor position index on click of TextField
- Question/bug: HTML prop minlength doesn't work in SMUI Textfield component
- Error: Tried to dipatch event without element
- get_current_component not compatible with svelte 5 HOT 3
- Update event system to use event callbacks like onclick. HOT 1
- Get everything working in non-runes mode.
- Change slots to @render calls (snippets).
- notifyClose does not check element's type
- Tailwind Incompatiblity: Textfield/Select outline variant bugs visually
- <Textfield/> does not handle input$readOnly attribute correctly.
- Autocomplete does not respect style="width: 100%" or required, like Select
- Color for .mdc-floating-label hardcoded
- Autocomplete in svelte5
- Svelte5 @next.174 broke SMUI HOT 2
- scss deprecation warning in _button-base.scss HOT 2
- [@smui/common] TypeError for projects with `exactOptionalPropertyTypes: true` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-material-ui.