如何在 Sapper 项目中为 Svelte Material UI (SMUI) 组件使用自定义主题/颜色？

Question

I've followed the instructions for using Svelte Material UI (SMUI) in a Sapper project.

I can import and use SMUI components with the default theme/colors if I leave src/theme/_smui-theme.scss blank. When I include the following code suggested by SMUI in this file to use custom colors, it tells me Can't find stylesheet to import.

@use "@material/theme" with (
    $primary: #5466F9,
    $secondary: #14a564,
    $surface: #fff,
    $background: #fff
);

I can confirm that the @material/theme directory does exist inside of node_modules. Can anyone help me understand why this would be causing such an error? Thanks!

Answer 1

This seems like the same issue as this one on the GitHub issue tracker:

The solution should be to delete node_modules and package-lock.json and reinstall.

rm -r node_modules
rm package-lock.json
npm install

Answer 2

Svelte Material UI was recently updated (improved performance!) and the latest install instructions work well for Sapper. If you are dealing with a similar error in a Sapper app, I would recommend the following steps:

1. uninstall rollup-plugin-postcss and sass
2. uninstall v2 SMUI components, eg npm uninstall @smui/textfield
3. install v3 SMUI components, eg npm install --save-dev @smui/textfield
4. follow the install instructions referenced above for sapper

This fixed it for me to allow me to provide a custom theme in src/theme/_smui-theme.scss

For non-sapper projects this may work . It was the inspiration beyond this fix above for sapper. Thanks to Hunter, the creator of SMUI, for his help in fixing this and for an awesome library!