How to solve (plugin postcss) Error: File to import not found or unreadable: smui-theme. Material UI Svelte project

Question

I am integrating Material UI into a Svelte project.

I follow everything from the documentation, but I get this error when running my project:

!] (plugin postcss) Error: File to import not found or unreadable: smui-theme.
node_modules/@smui/tab/_index.scss
Error: File to import not found or unreadable: smui-theme.

What can be the problem?

Answer 1

The error means that you must have a file called _smui-theme.scss in order to be able to compile Sass.

First make sure you have the file _smui-theme.scss in your project under theme directory. (I usually put it in src/theme/_smui-theme.scss)

Then you have to add it in the postcss config of your rollup plugin like this:

import postcss from 'rollup-plugin-postcss';

export default {
    ...
    plugins: [
        svelte({
            ...
        }),

        ....

        postcss({
            extract: true,
            minimize: true,
            use: [
                ['sass', {
                    includePaths: [
                        './src/theme',     <<< ------------ HERE    
                        './node_modules'
                    ]
                }]
            ]
        }),
        ...
};

Make sure the theme directory is well included in the postcss plugin config like shown before.

Note: if the path is not right, you may receive the same error!