Error: Can't find stylesheet to import; @import 'material-theme';

[johschmitz]

I am trying to use this component system with the current version of the Svelte template:
https://github.com/sveltejs/template
However I am getting an error:

$ npm run dev

> [email protected] dev
> rollup -c -w

rollup v2.36.1
bundles src/main.js → public/build/bundle.js...
[!] (plugin svelte) Error: Can't find stylesheet to import.
   ╷
58 │ @import 'material-theme';
   │         ^^^^^^^^^^^^^^^^
   ╵
  node_modules/svelte-materialify/src/styles/_variables.scss 58:9            @import
  node_modules/svelte-materialify/src/components/Grid/Container.svelte 2:11  root stylesheet

I compared with your older template from here
https://github.com/TheComputerM/svelte-materialify-template
and the difference seems to be mainly this import in the rollup:

import css from 'rollup-plugin-css-only';

and a file called theme/_material-theme.scss
I could not get it to run though.
Any ideas?

[TheComputerM]

Did you install: sass, postcss and svelte-preprocess?

[samdoeswork]

Hi, exact same issue for me too. Clean new project, insalled sass, postcss, svelte-preprocess, added theme top level directory with _material-theme.scss

The build fails like this:

(plugin svelte) Error: Can't find stylesheet to import.
╷
58 │ @import 'material-theme';
│ ^^^^^^^^^^^^^^^^
╵
node_modules\svelte-materialify\src\styles_variables.scss 58:9 @import
node_modules\svelte-materialify\src\components\Grid\Container.svelte 2:11 root stylesheet
node_modules\svelte-materialify\src\components\Grid\Container.svelte
Error: Can't find stylesheet to import.
╷
58 │ @import 'material-theme';

[TheComputerM]

https://svelte-materialify.vercel.app/getting-started/installation/#advanced-install

Then create a _material-theme.scss file and place it in any folder, lets put it in a folder called theme. Then include the path in the preprocess function in your rollup.config.js (likewise follow the same in webpack but for svelte-loader).

  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['theme'],
    },
  }),

[samdoeswork]

Thanks. It's working now.

I think the issue for both me and OP was referencing the svelte.config.js from the rollup.config.js

// our brains read this as being a regular import, not referencing one config file from another
const { preprocess } = require('./svelte.config');

I replicated the change manually in rollup.config.js and this works as shown below.
Might be worth doing it this way in the docs (even if it's another step) - it's up to you.

plugins: [
svelte({
preprocess: sveltePreprocess({scss: {
includePaths: ['theme'],
}}),
...
}),

Thank you for your work on this!

[TheComputerM]

Adding to the svelte.config.js file resolves language server issues. If that is not done, vs code may scream errors at you.

[johschmitz]

@TheComputerM Could you add this information to your getting started instructions?
https://svelte-materialify.vercel.app/getting-started/installation/
Otherwise I believe more people will stumble over this.

[TheComputerM]

Will do, but also have to mention to add it to the svelte.config.js.

[FunMiles]

This is still not working for me with webpack. I could ignore it for a while as I was making development and include the regular package. But seeing how svelte-materialify is taking >2MB of my root bundle, I cannot ignore it anymore as I am approaching release.
What's a proper way to get this working with webpack?

[TheComputerM]

@FunMiles Can you provide me the config files for webpack and svelte (also you need not worry about the root package as most likely all the files will be bundled to js reducing the final bundle size)

[FunMiles]

Correction. After one more try, I got it to work (I saw what I think are changes from what I had read before in the README and noticed the improved doc for webpack`.
But the bundle size has not decreased. It's even increased by 1kB or so.
I've replaced all the imports of the type

    import { ButtonGroup, ButtonGroupItem, Dialog, Button } from 'svelte-materialify'; 

with

    import { ButtonGroup, ButtonGroupItem, Dialog, Button } from 'svelte-materialify/src';

I was hoping that going from the compiled code to the source would have shake code to a smaller size. I guess I will have to keep investigating further.

PS: Full apologies. As noted above, the issue was resolved after reading what I think is newer doc. As for the bundle size, it was mostly an unrelated issue of a strange unused import that messed with typescript, leaving >2.5MB of unused code.

[bato3]

@FunMiles I followed the instructions on this topic, but Rollup still adds redundant CSS. For this #231 (comment), I did some tests with MaterialAppMin and found out that I need to import like this:

  import  MaterialAppMin  from 'svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte';
  import  AppBar  from 'svelte-materialify/src/components/AppBar';

[Florian-Schoenherr]

@bato3 also see #155