How to use custom theme/colors for Svelte Material UI (SMUI) components in Sapper project?

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!

Solution

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:

uninstall rollup-plugin-postcss and sass
uninstall v2 SMUI components, e.g. npm uninstall @smui/textfield
install v3 SMUI components, e.g. npm install --save-dev @smui/textfield
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!