Error: Can't find stylesheet to import

[N7fenrir]

Error while trying to use @smui/top-app-bar

Code:

<script>
  import TopAppBar, { Row, Section, Title } from "@smui/top-app-bar";
  export let currentTitle = null;
  export let currentPage = null;
</script>

{#if currentTitle !== null && currentPage !== null}
  <div class="top-app-bar-container">
    <TopAppBar variant="static" color={"primary"}>
      <Row>
        <Section>
          <Title>{currentTitle}</Title>
        </Section>
      </Row>
    </TopAppBar>
  </div>
{/if}

<style>
  .top-app-bar-container {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
</style>

Error:

> doe-graph-app@2.0.1 devStart
> npm run build && sirv public


> doe-graph-app@2.0.1 build
> rollup -c


src/main.ts → public/build/bundle.js...
[!] (plugin postcss) Error: Can't find stylesheet to import.
   ╷
32 │ @use '@material/feature-targeting/feature-targeting';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/elevation/_elevation-theme.scss 32:1   @forward
  node_modules/@material/elevation/_mixins.scss 23:1            @use
  node_modules/@material/top-app-bar/mdc-top-app-bar.scss 26:1  @use
  node_modules/@smui/top-app-bar/_style.scss 1:1                @use
  node_modules/@smui/top-app-bar/_index.scss 2:1                root stylesheet
node_modules/@smui/top-app-bar/_index.scss
Error: Can't find stylesheet to import.
   ╷
32 │ @use '@material/feature-targeting/feature-targeting';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/elevation/_elevation-theme.scss 32:1   @forward
  node_modules/@material/elevation/_mixins.scss 23:1            @use
  node_modules/@material/top-app-bar/mdc-top-app-bar.scss 26:1  @use
  node_modules/@smui/top-app-bar/_style.scss 1:1                @use
  node_modules/@smui/top-app-bar/_index.scss 2:1                root stylesheet
    at Object._newRenderError (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:13537:19)
    at Object._wrapException (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:13374:16)
    at _render_closure1.call$2 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:80373:21)
    at _RootZone.runBinary$3$3 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:27269:18)
    at _FutureListener.handleError$1 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:25797:19)
    at _Future__propagateToListeners_handleError.call$0 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:26094:49)
    at Object._Future__propagateToListeners (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:4543:77)
    at _Future._completeError$2 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:25927:9)
    at _AsyncAwaitCompleter.completeError$2 (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:25270:12)
    at Object._asyncRethrow (/home/theuser/WorkDesk/DOE-Svelte/node_modules/sass/sass.dart.js:4292:17)

npm ERR! code 1
npm ERR! path /home/theuser/WorkDesk/DOE-Svelte
npm ERR! command failed
npm ERR! command sh -c rollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/theuser/.npm/_logs/2021-04-15T12_46_03_373Z-debug.log
npm ERR! code 1
npm ERR! path /home/theuser/WorkDesk/DOE-Svelte
npm ERR! command failed
npm ERR! command sh -c npm run build && sirv public

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/theuser/.npm/_logs/2021-04-15T12_46_03_389Z-debug.log

I have also installed @material/typography and @feature-targeting but still the error persists.

[hperrin]

Are you including the 'node_modules' directory in your Sass includes? I'm not sure what else it could be. Can you post your Rollup config file?

[N7fenrir]

I have included the node_modules in sass includes. Here is the rollup config:

The error was absent before the revamping of SMUI

import svelte from "rollup-plugin-svelte";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

import css from "rollup-plugin-css-only";
import postcss from "rollup-plugin-postcss";
import path from "path";

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let server;

  function toExit() {
    if (server) server.kill(0);
  }

  return {
    writeBundle() {
      if (server) return;
      server = require("child_process").spawn(
        "npm",
        ["run", "start", "--", "--dev"],
        {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true,
        }
      );

      process.on("SIGTERM", toExit);
      process.on("exit", toExit);
    },
  };
}

const postcssOptions = () => ({
  extensions: [".scss"],
  extract: false,
  minimize: true,
  use: [
    [
      "sass",
      {
        includePaths: [
          "./src/theme",
          "./node_modules",
          // This is only needed because we're using a local module. :-/
          // Normally, you would not need this line.
          path.resolve(__dirname, "..", "node_modules"),
        ],
      },
    ],
  ],
});

export default {
  input: "src/main.ts",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess({ sourceMap: !production }),
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
      emitCss: true,
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: "bundle.css" }),
    postcss(postcssOptions()),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"],
    }),
    commonjs(),
    typescript({
      sourceMap: !production,
      inlineSources: !production,
    }),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("src"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

[hperrin]

Ah. If you've updated to the latest SMUI, v3, it looks like your config needs to be updated. Likely your theme file as well. I can see you're not using Sapper, but the instructions in the readme for Sapper should help you update the postcssOptions function:
https://github.com/hperrin/svelte-material-ui#integration-for-sapper

For the _smui-theme.scss file, you can follow this guide to update it:
https://github.com/hperrin/svelte-material-ui/blob/master/THEMING.md

[hperrin]

Basically the new way is to extract the SCSS with PostCSS into a file called 'smui.css'. Then include this file in your HTML. That way you don't have a flash of unstyled content anymore.

[N7fenrir]

Hi, I managed to get it working by a hard reset of the node_modules by deleting it and re-installing it.

What I did:

1. Delete package.lock.json
2. Delete node_modules
3. Selectively deleted all smui and material packages (if any) from package.json
4. npm install and incrementally added back all packages

I still do not know what was the exact reason, maybe a migration error. But I did not encounter the error again.

Seems to be working perfectly now.

Thanks!.

Edit 1: Added the exact steps I took to get rid of the issue.

[ile]

Getting this error when trying to do npm install in "site" folder (not sure if I'm doing this right).

~/src/svelte/svelte-material-ui/site$ npm i
npm ERR! code 65
npm ERR! path /home/ile/src/svelte/svelte-material-ui/packages/banner
npm ERR! command failed
npm ERR! command sh -c sass --no-source-map -I node_modules _style.scss bare.css
npm ERR! Error: Can't find stylesheet to import.
npm ERR!   ╷
npm ERR! 1 │ @use '@material/banner/styles';
npm ERR!   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR!   ╵
npm ERR!   _style.scss 1:1  root stylesheet

[kotx]

How do I fix this issue when I'm using sveltekit?

[hperrin]

Getting this error when trying to do npm install in "site" folder (not sure if I'm doing this right).

~/src/svelte/svelte-material-ui/site$ npm i
npm ERR! code 65
npm ERR! path /home/ile/src/svelte/svelte-material-ui/packages/banner
npm ERR! command failed
npm ERR! command sh -c sass --no-source-map -I node_modules _style.scss bare.css
npm ERR! Error: Can't find stylesheet to import.
npm ERR!   ╷
npm ERR! 1 │ @use '@material/banner/styles';
npm ERR!   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR!   ╵
npm ERR!   _style.scss 1:1  root stylesheet

You shouldn't run npm i commands directly within package directories, since packages need to be linked and hoisted by lerna. Instead, you should run npm bootstrap from the root dir.