Step-by-Step Guide for Installation

[cabreraalex]

It would be great to have a more detailed guide on how to add this library to a clean Svelte installation. I'm not super comfortable messing around with rollup or the config files, I would love to be able to follow a guide that sets it up for a clean Svelte install.

This is an awesome addition to Svelte, by the way, thank you!

(Similar to #23)

[hperrin]

I'm not sure what you mean. It's gotta have a bundler to use the Sass files. There are bare.css files, but those are more of a last resort.

[hperrin]

I will try to go into more detail on installation though, since it is a bit complex.

[cabreraalex]

Yeah exactly, a more detailed guide for how to install the preprocesser/other necessary stuff to get it working with the normal Svelte install would be awesome.

[gitcoderis]

Could you also include instructions for using this with Sapper? :)

[danielquintero]

Hi everyone, I got this working with sapper like:

rollup.config.js

import path from "path";
import alias from "rollup-plugin-alias";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
import commonjs from "rollup-plugin-commonjs";
import svelte from "rollup-plugin-svelte";
import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import config from "sapper/config/rollup.js";
import pkg from "./package.json";
import postcss from "rollup-plugin-postcss";

const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
  (warning.code === "CIRCULAR_DEPENDENCY" &&
    /[/\\]@sapper[/\\]/.test(warning.message)) ||
  onwarn(warning);
const dedupe = importee =>
  importee === "svelte" || importee.startsWith("svelte/");
const aliases = () => ({
  resolve: [".svelte", ".js", ".scss", ".css"],
  entries: [
    {
      find: /^@smui\/([^\/]+)$/,
      replacement: path.resolve(
        __dirname,
        "node_modules",
        "@smui",
        "$1",
        "index.js"
      )
    },
    {
      find: /^@smui\/([^\/]+)\/(.*)$/,

      replacement: path.resolve(__dirname, "node_modules", "@smui", "$1", "$2")
    }
  ]
});
const postcssOptions = () => ({
  extensions: [".scss", ".sass"],
  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 {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      alias(aliases()),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode)
      }),
      svelte({
        dev,
        hydratable: true,
        emitCss: true
      }),
      resolve({
        browser: true,
        dedupe
      }),
      commonjs(),
      postcss(postcssOptions()),
      legacy &&
        babel({
          extensions: [".js", ".mjs", ".html", ".svelte"],
          runtimeHelpers: true,
          exclude: ["node_modules/@babel/**"],
          presets: [
            [
              "@babel/preset-env",
              {
                targets: "> 0.25%, not dead"
              }
            ]
          ],
          plugins: [
            "@babel/plugin-syntax-dynamic-import",
            [
              "@babel/plugin-transform-runtime",
              {
                useESModules: true
              }
            ]
          ]
        }),

      !dev &&
        terser({
          module: true
        })
    ],

    onwarn
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      alias(aliases()),
      replace({
        "process.browser": false,
        "process.env.NODE_ENV": JSON.stringify(mode)
      }),
      svelte({
        generate: "ssr",
        dev
      }),
      resolve({
        dedupe
      }),
      commonjs(),
      postcss(postcssOptions())
    ],
    external: Object.keys(pkg.dependencies).concat(
      require("module").builtinModules ||
        Object.keys(process.binding("natives"))
    ),

    onwarn
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode)
      }),
      commonjs(),
      !dev && terser()
    ],

    onwarn
  }
};

package.json

"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@material/elevation": "^3.1.0",
    "@material/linear-progress": "^3.1.0",
    "@material/theme": "^3.1.0",
    "@material/typography": "^3.1.0",
    "@mdi/js": "^4.4.95",
    "install": "^0.13.0",
    "node-sass": "^4.12.0",
    "npm": "^6.12.0",
    "npm-run-all": "^4.1.5",
    "postcss-scss": "^2.0.0",
    "rollup": "^1.12.0",
    "rollup-plugin-alias": "^2.1.0",
    "rollup-plugin-babel": "^4.0.2",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-replace": "^2.0.0",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^4.0.4",
    "sapper": "^0.27.0",
    "svelte": "^3.0.0",
    "svelte-material-ui": "^1.0.0-beta.15"
  }

[MintyMods]

@danielquintero Nice, I couldn't get it working so migrated to web pack but tempted to move back now if it works.

[ifreann]

@danielquintero thank you so much, the tip about using path.resolve(__dirname, "..", "node_modules") got it working for me.

[simonh1000]

Anyone got instructions for a standard (non-sapper) basic install of this library - I'm just as confused as OP about how to add sass and to configure it to find SMUI.

After a lot of trying, this is what I have for TabBar

[rothnic]

I found that if I don't have the exact versions of postcss as mentioned in this comment, I get a bunch of errors about Invalid CSS after "...eting-functions": expected expression (e.g. 1px, bold), was ".all()) {".

So, those that are using svelte-material-ui with rollup and sapper have to be very careful with the versions. But, I did get it working.

[funkybob]

I was having a lot of trouble just trying to use icon-buttons, but it seems that despite it depending on @material/icon-button ... because npm is installing that inside the packages, rollup's resolve can't find them.

I had to use "npm ls @material/icon-button" to find which version it wanted, and explicitly install that version myself.

Without it installed I got:

[!] (plugin postcss) Error: File to import not found or unreadable: @material/icon-button/mdc-icon-button.
node_modules/@smui/icon-button/_index.scss
Error: File to import not found or unreadable: @material/icon-button/mdc-icon-button.
    at options.error (.../node_modules/node-sass/lib/index.js:291:26)

With the wrong version installed, I got:

[!] (plugin postcss) Error: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
node_modules/@smui/icon-button/_index.scss
Error: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
    at options.error (.../node_modules/node-sass/lib/index.js:291:26)

[mwamp]

I had the same experience as @funkybob here (not a very pleasant one)
I want to recommend using sass instead of node-sass since the exception are way more explicit.

Does anyone know a way we could do this without explicitly installing all the @material deps?

[omirobarcelo]

I had this error Invalid CSS after "...eting-functions": expected expression (e.g. 1px, bold), was ".all()) {" and I followed the advice from @rothnic

These are my dependencies:

  "devDependencies": {
    "@material/typography": "^3.1.0",
    "@smui/button": "^1.0.0-beta.20",
    "rollup": "^1.12.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "2.0.3",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "sass": "^1.26.3",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.2.6"
  }

I had to change @material/typography from ^5.1.0 to ^3.1.0 and rollup-plugin-postcss specifically to 2.0.3.

[severindupouy]

I made it work using the help given above by @danielquintero, thanks to you.

@hperrin, first, thanks for library. 👍
Still, a better documentation should be useful, with a concrete example.
If you do not have all the knowledge, like me, the first point of the documentation is confused and does not help to know what to do. This mixes "why" and "how". I would only need a "how" to configure the library to make it work. Knowing "why" is of course always useful, but in a second step.
So, the 1rst point of the doc here is too unclear.

1. To bundle this in your own code, use a Sass processor (not a Sass Svelte preprocessor, but a Sass processor). SMUI index.js files import Sass files, and they need to be compiled by a processor. The *.svelte files don't include any Sass or CSS, so a Svelte preprocessor is not necessary.
   Alternatively, you can import from the bare.js files, which doesn't include any styling. Then you can either import the Sass yourself, or use the bare.css files which are precompiled and packaged with the default theme.

By reading this, I would not have succeeded in producing alone the piece of code given by @danielquintero.

Anyway, thanks for library.

---

HOW TO MAKE IT WORK

1. create the src/theme/_smui-theme.scss file
2. install these packages : npm install --save-dev node-sass rollup-plugin-postcss @rollup/plugin-alias @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace
3. copy/paste the rollup.config.js given above by @danielquintero
4. in the rollup.config.js, modify the imports names according to package.json :

   import alias from '@rollup/plugin-alias';
   import commonjs from '@rollup/plugin-commonjs';
   import resolve from '@rollup/plugin-node-resolve';
   import replace from '@rollup/plugin-replace';
   import path from 'path';
   import babel from 'rollup-plugin-babel';
   import postcss from 'rollup-plugin-postcss';
   import svelte from 'rollup-plugin-svelte';
   import { terser } from 'rollup-plugin-terser';
   import config from 'sapper/config/rollup.js';
   import pkg from './package.json';
   

My package.json :

"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-alias": "^3.0.1",
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "@rollup/plugin-replace": "^2.3.1",
    "node-sass": "^4.13.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^1.32.1",
    "rollup-plugin-babel": "^4.0.2",
    "rollup-plugin-postcss": "^2.5.0",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^5.3.0",
    "sapper": "^0.27.0",
    "svelte": "^3.20.1",
    "svelte-material-ui": "^1.0.0-beta.20"
  }

[FunMiles]

Is there a working set of instructions for a regular svelte app? I am not ready to switch to sapper yet and have not been able to import a simple Button in my app yet. The added instructions about sass are probably a piece of the puzzle, but for a newbie, they are just too vague. Any help would be appreciated.

[hperrin]

@FunMiles There are the webpack and rollup examples that are linked to in the Usage section of the readme:
https://github.com/hperrin/svelte-material-ui#usage

[hperrin]

There are now much more thorough installation instructions on the website and in the repo. They go over how to install and setup SMUI in Rollup, Webpack, Sapper, and the REPL.

https://sveltematerialui.com/INSTALL.md/