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

我用 Svelte + MaterializeCSS 和 SMUI (Svelte Material UI) >> Svelte + MaterializeCSS + SMUI开发了这个模板