How to install Svelte Material UI (with Routify)

Question

I am attempting to install Svelte Material UI into the Routify Template project:

https://routify.dev/guide/installation

When I do:

npm install --save-dev svelte-material-ui

Everything installs just fine.

When I try to reference a component such as:

  import Button from '@smui/button';

I get an error:

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules/@smui/button/_index.scss (1:0)
1: @import "smui-theme";
   ^
2: @import "./style";
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:5174:30)
    at Module.error (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9629:16)
    at tryParse (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9543:23)
    at Module.setSource (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:9935:30)
    at ModuleLoader.addModuleSource (/home/wktdev/Desktop/svelte_sandbox/routify_sandbox/svlete_routify-sandbox/node_modules/rollup/dist/shared/rollup.js:17813:20)

I have installed sass both globally and locally to the project

npm install -g sass

npm instal sass

I installed the svelte proprocessor.

From the errors it looks like I need to set something in "rollup".

With React, installing material ui is a simple NPM install. I am not sure what I am doing wrong.

Thanks!

Addendum:

The Routify rollup.config.js file is this:

import { createRollupConfigs } from './scripts/base.config.js'
import autoPreprocess from 'svelte-preprocess'
import postcssImport from 'postcss-import'

const production = !process.env.ROLLUP_WATCH;

export const config = {
  staticDir: 'static',
  distDir: 'dist',
  buildDir: `dist/build`,
  serve: !production,
  production,
  rollupWrapper: rollup => rollup,
  svelteWrapper: svelte => {
    svelte.preprocess = [
      autoPreprocess({
        postcss: { plugins: [postcssImport()] },
        defaults: { style: 'postcss' }
      })]
  },
  swWrapper: worker => worker,
}

const configs = createRollupConfigs(config)

export default configs

/**
  Wrappers can either mutate or return a config

  wrapper example 1
  svelteWrapper: (cfg, ctx) => {
    cfg.preprocess: mdsvex({ extension: '.md' }),
  }

  wrapper example 2
  rollupWrapper: cfg => {
    cfg.plugins = [...cfg.plugins, myPlugin()]
    return cfg
  }
*/

The Svelte Material UI rollup.configg.js example is this:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

module.exports = {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    svelte({
      emitCss: true
    }),
    resolve({
      browser: true,
      dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
    }),
    commonjs(),
    postcss({
      extract: true,
      minimize: true,
      use: [
        ['sass', {
          includePaths: [
            './theme',
            './node_modules'
          ]
        }]
      ]
    })
  ],
  watch: {
    clearScreen: false
  }
};

I don't know the first thing about "Rollup" thus I have no idea how to reconcile these two things.

Answer 1

I asked on Discord, JakeDK provided the answer.

In rollup.config.js, add:

import postcss from "rollup-plugin-postcss";

Then change the line 'rollupWrapper: rollup => rollup,' to

  rollupWrapper: rollup => {
    rollup.plugins = [
      ...rollup.plugins, 
      postcss({
        // extract: true,
        minimize: true,
        use: [
          ['sass', {
            includePaths: [
              './src/theme',
              './node_modules'
            ]
          }]
        ]
      })
    ]
  },