How to use svelte material ui with snowpack ?

[slevy85]

Hi, thank you for this great library.

I am trying to use it with snowpack but I didn't succeed. I have the application that launches, I can see the smui elements but without any styling.

Here is the snowpack.config.js I used :

module.exports = {
  extends: "@snowpack/app-scripts-svelte",
  scripts: {
    // This didn't change anything
    // "run:sass": "sass src:src --no-source-map",
    // "run:sass::watch": "$1 --watch",
    // "build:sass,scss": "sass"
  },
  plugins: [],
  installOptions: {
    rollup: {
      plugins: [
        require("rollup-plugin-svelte")({
          emitCss: true,
        }),
        require("rollup-plugin-postcss")({
          extract: true,
          minimize: true,
          use: [
            [
              "sass",
              {
                includePaths: ["./src/theme", "./node_modules"],
              },
            ],
          ],
        }),
      ],
    },
  }
};

And then in App.svelte I import components :

<script>
  import Button, { Label } from "@smui/button";
  import Fab from "@smui/fab";
  import { Icon } from "@smui/common";

  const message = "Learn Svelte";
</script>
 <Button>
      <Label>Do sSomething</Label>
    </Button>
    <Fab on:click={() => alert('Clicked!')} extended>
      <Icon class="material-icons" style="margin-right: 12px;">favorite</Icon>
      <Label>Extended FAB</Label>
    </Fab>

And the result is default browser style :

I am sorry I didn't post my question on stackoverflow because there already is a similar question about this but without answer yet : https://stackoverflow.com/questions/61970250/getting-svelte-material-ui-working-with-snowpack-and-sass

Thank you for your help

[ackushiw]

I was able to get it working using the bare implementation. Details here: https://stackoverflow.com/a/64175081/2895249

[GamingInfinite]

@ackushiw I would like to ask how your implementation works, because at the very least as of 5.0.0.beta7 bare doesn't function (at the very least not as expected) because when I tried to do that it just threw an error that it doesn't exist.