Parcel: can't find stylesheet to import: @import "smui-theme";

[thomanimation]

I've tried several approaches to get svelte-material-ui to work with parcel but I can't figure out how to set up the _smui-theme.scss correctly. I get the following error as a result:

node_modules/@smui/button/_index.scss:1:9: Can't find stylesheet to import.
  ╷
1 │ @import "smui-theme";
  ╵
  node_modules/@smui/button/_index.scss 1:9  root stylesheet
Error: Can't find stylesheet to import.

In my project there are 3 folders: node_modules, src and themes. The themes folder contains a _smui-theme.scss file.

My postcss.config.js file looks like this:

const plugins =
  process.env.NODE_ENV === 'production'
    ? ['tailwindcss', 'autoprefixer', '@fullhuman/postcss-purgecss']
    : ['tailwindcss'];

module.exports = {
  plugins,
  use: [ [
          "sass",
          {
              includePaths: ["./themes", "./node_modules"]
          }
        ] ]
}

[devghost]

Not ideal, but I got it working by importing the specific js & styles explicitly...

HTH

<script>
    import TopAppBar, {Row, Section, Title} from '@smui/top-app-bar/bare.js';
    import '@smui/top-app-bar/bare.css';

    import IconButton from '@smui/icon-button/bare.js';
    import '@smui/icon-button/bare.css';
</script>

[andy37380]

try follow steps：

install rollup-plugin-postcss

npm install rollup-plugin-postcss

edit rollup.config.js

export default {
    // Omitted.....
    plugins: [
        // Omitted.....
        // **add postcss settings**
        postcss({
            extensions: ['.scss', '.sass'],
            extract: false,
            minimize: true,
            use: [
                ['sass', {
                    includePaths: [
                        './src/theme',
                        './node_modules'
                    ]
                }]
            ]
        }),
        // Omitted.....
    ]
};

add empty file

src\theme\_smui-theme.scss

[thomanimation]

Thank you. I'm looking for a way to get it working with Parcel instead of rollup.

[cdock1029]

A workaround, as per @devghost suggestion, you can use the bare imports.

Customized theme can be achieved by placing this in an .scss file imported into your html:

@import '@material/theme/color-palette';

$mdc-theme-primary: $material-color-indigo-800;
$mdc-theme-secondary: $material-color-red-a700;

$mdc-theme-background: $material-color-grey-400;
$mdc-theme-surface: #fff;

$mdc-theme-error: $material-color-red-900;

@import '@material/typography/mdc-typography';
// This adds classes like "mdc-theme--primary-bg".
@import '@material/theme/mdc-theme';

body {
  background: $mdc-theme-background;
}

// can add this to style typography automatically
html {
  @include mdc-typography('body1');
}
h1 {
  @include mdc-typography('headline1');
}

h2 {
  @include mdc-typography('headline2');
}

h3 {
  @include mdc-typography('headline3');
}

h4 {
  @include mdc-typography('headline4');
}

h5 {
  @include mdc-typography('headline5');
}

h6 {
  @include mdc-typography('headline6');
}

caption {
  @include mdc-typography('caption');
}

code,
pre {
  font-family: 'Roboto Mono', monospace;
}

small {
  font-size: 0.9em;
}

big {
  font-size: 1.1em;
}

b,
strong {
  font-weight: bold;
}

[wahidshafique]

Exact same problem here, any updates on this? Is it just easier for me to switch to webpack or rollup?

[thubalek]

I'm using rollup but it is also not working for me. I tried solution suggested in https://github.com/hperrin/svelte-material-ui/issues/87#issuecomment-584662963 but no luck. I'm getting this stacktrace:

bundles src/main.js → public/build/bundle.js...
[!] (plugin postcss) Error: Can't find stylesheet to import.
  ╷
1 │ @import "smui-theme";
  │         ^^^^^^^^^^^^
  ╵
  node_modules/@smui/top-app-bar/_index.scss 1:9  root stylesheet
node_modules/@smui/top-app-bar/_index.scss
Error: Can't find stylesheet to import.
  ╷
1 │ @import "smui-theme";
  │         ^^^^^^^^^^^^
  ╵
  node_modules/@smui/top-app-bar/_index.scss 1:9  root stylesheet
    at Object._newRenderError (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:13621:19)
    at Object._wrapException (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:13467:16)
    at _render_closure1.call$2 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:76994:21)
    at _RootZone.runBinary$3$3 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:25521:18)
    at _RootZone.runBinary$3 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:25525:19)
    at _FutureListener.handleError$1 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:23975:19)
    at _Future__propagateToListeners_handleError.call$0 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:24271:40)
    at Object._Future__propagateToListeners (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:3500:88)
    at _Future._completeError$2 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:24099:9)
    at _AsyncAwaitCompleter.completeError$2 (/home/tom/workspace/polyglota-nt/frontend/node_modules/sass/sass.dart.js:23491:12)

in rollup.config.js I have:

...
    plugins: [
        postcss({
            extensions: ['.scss', '.sass'],
            extract: false,
            minimize: true,
            use: [
              ["sass", {
                includePaths: [
                  // styles folder contains the necessary "_smui-theme.scss" file.
                  "./src/styles",
                  "./node_modules",
                ]
              }]
            ],
          }),
        svelte({
...

and empty file _smui-theme.scss exists in folder ./src/styles.

To be honest: I'm new in JS/Svelte development so I may be doing some stupid mistake.

P.S. I'm running app using npm run dev and app base was created using method 1 described at https://svelte.dev/blog/the-easiest-way-to-get-started

[thubalek]

After a few hours experimenting (updated NPM, NODE, ...) I found that renaming _smui-theme.scss to smui-theme.scss (without underscore prefix) solved the problem. I don't understand the mechanics behind (why in documentation is file with prefix).

[hperrin]

Since there is a new release (5.0), and this issue was filed prior to that release and hasn't had any updates in at least six months, I'm going to close it as part of a mass issue clean up. If this issue is still relevant, please re-open it and mention me in a comment, and I will triage the issue into a relevant milestone. Thank you for your patience, and I apologize for any inconvenience.

[igorsantos07]

@hperrin, this still seems legit as of 6.0.0 - maybe just as missing docs, though?

Steps:

1. follow https://sveltematerialui.com/THEMING.md (thus, creating light and dark theme files which get included as <link/> tags in index.html after compiling the theme
2. Try to customize a component, such as Paper's colors. Check the used code below:

   
   @use '@smui/paper/index' as paper;
   @use '@material/theme/index' as theme;

@include paper.paper-color( custom-green, theme.$green-800, theme.accessible-ink-color(theme.$green-800) );

The missing `@import "smui-theme"` is pointed out by `@smui/paper/index`.

I guess this issue is probably obvious, but for a newcomer to both Svelte and MDC, this is completely bonkers :sweat_smile: 

## EDIT
After a bunch of blind shots, based on previous comments, I ended up finding the issue. It seems to be a doc issue with the Custom Color section of Papers - just `@use '@smui/paper/mixins' as paper` instead of `@smui/paper/index`, so it skips the reimport(?) of themes.
One other thing that would be very important in the Themes page, tho, is to explain how to further selectively import the final theme given the browser preference between light and dark - so we can use the selected colors in custom styles.

[bradthomasbrown]

@igorsantos07 You are a saint, I am a newcomer and indeed found this bonkers. Your suggestion was very simple and fixed the issue right up.

[igorsantos07]

@hperrin trying to ping you again since this seems to be a recurring issue for some people :)