How could I integrate Materialize CSS and JavaScript components into Svelte

Question

I'm new to Svelte, and I want to build my next project with it.

I want to use Materialize for CSS and JavaScript components, but I couldn't find a way to set it up and integrate with Svelte.

How could I do that?

Answer 1

Install the materialize-css package with yarn add -D materialize-css.

The stock Svelte template (https://github.com/sveltejs/template) has 2 CSS imports in public/index.html

<!-- base styles -->
<link rel='stylesheet' href='/global.css'>

<!-- styles that were defined in the components -->
<link rel='stylesheet' href='/build/bundle.css'>

Let's adjust how the CSS is built. Instead of global.css, we'll merge global.css and materialize/dist/materialize.css into one file.

There is a rollup plugin called rollup-plugin-css-only that can do this.

yarn add -D rollup-plugin-css-only

In rollup.config.js, configure the plugin by importing it import css from 'rollup-plugin-css-only' and add the css({output: "public/build/base.css"}) to the list of plugins.

Now we can import .css files in src/main.js:

import '../node_modules/materialize-css/dist/css/materialize.css'
import '../public/global.css'

// import js stuff too
import '../node_modules/materialize-css/dist/js/materialize'

....

// init material plugins
M.AutoInit()

Don't forget to update public/index.html to include the generated base.css instead of global.css:

- <link rel='stylesheet' href='/global.css'>
+ <link rel='stylesheet' href='/build/base.css'>

Demo

Answer 2

I have developed this template with Svelte + MaterializeCSS and SMUI (Svelte Material UI) >> Svelte + MaterializeCSS + SMUI