search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.27k stars 287 forks source link

Error: Can't find stylesheet to import. @use '@material/list/mixins' #619

Closed mugu-fatman closed 9 months ago

mugu-fatman commented 10 months ago

Hi , Any idea when you will upgrade to svelte 4?

Thanks

hperrin commented 10 months ago

It already works with Svelte 4 (https://github.com/hperrin/svelte-material-ui/commit/51d2411a5630ca5511ad9e79a2f333339998f939). Is there a specific problem you're seeing?

mugu-fatman commented 10 months ago

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
hperrin commented 10 months ago

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.

mugu-fatman commented 10 months ago 
@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

mugu-fatman commented 10 months ago

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
mugu-fatman commented 10 months ago

@hperrin could you please provide some inputs on this

hperrin commented 10 months ago

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.

hperrin commented 9 months ago

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.