CODEWITHSUNDEEP
materializebulmasveltesvelte-componentsvelte-3
Moshe
Moshe

Reputation: 6991

Integrate the Sass Version of MaterialCSS or Bulma Into Svelte

I am looking for instructions into how I can integrate the sass versions of Materializecss or Bulma into Svelte. My goal is to be able to import individual components (like a button component or a card component) into an individual svelte component. Furthermore, I would like to be able to take advantage of sass variables that Bulma offers.

I have looked for some tutorials on how to do this, but I have not found anything yet.

Any ideas?

Upvotes: 3

Views: 4584

Answers (6)

Cyril
Cyril

Reputation: 241

If you use SvelteKit, first install Bulma:

npm i -D bulma

Then globally load Bulma's variables and mixins from Vite's config, as well as your custom variables:

// vite.config.js
export default defineConfig({
  plugins: [sveltekit()],
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `
          @import "$lib/sass/_variables"
          @import "bulma/sass/utilities/_all"
        `,
      }
    },
  }
});

Define your own variables or those of Bulma that you want to redefine:

// src/lib/sass/_variables.sass
$primary: red
$secondary: orange
$tablet: 600px

Finally, import the modules you want from Bulma from the global file:

// src/lib/sass/global.sass
@import "bulma/sass/base/_all"
@import "bulma/sass/elements/_all"
@import "bulma/sass/form/_all"
@import "bulma/sass/components/_all"
@import "bulma/sass/grid/_all"
@import "bulma/sass/helpers/_all"
@import "bulma/sass/layout/_all"

Upvotes: 0

dabeng
dabeng

Reputation: 1450

run the following command:

npx svelte-add@latest bulma

Upvotes: 0

Rubén Terré
Rubén Terré

Reputation: 21

If you find it helpful I have developed a template to be able to use MaterializeCSS in Svelte. In addition I also added SMUI (Svelte Material UI) that adds scss functionalities to work the project styles with SASS.

Svelte + MaterializedCSS + SMUI

Upvotes: 1

Sámal Rasmussen
Sámal Rasmussen

Reputation: 3505

I've made a minimal commit on top of the default Svelte template that gets Bulma up and running in this example repo:

https://github.com/samal-rasmussen/svelte-bulma/commit/8afb28f6f157de89d6ace8310a31ab6d2b5e1776

Upvotes: 1

dmaixner
dmaixner

Reputation: 874

My approach is a bit different. Here, I'm importing whole Bulma, but you can easily import just those components you really need. Then, I'm using PurgeCSS to clean up unused CSS during the build process.

  1. App.svelte
        <style lang="scss" global>
        @import "bulma/bulma";
        </style>
  1. rollup.config.js
    import sveltePreprocess from 'svelte-preprocess';
    import postcss from 'rollup-plugin-postcss';
    import autoprefixer from 'autoprefixer';
    import purgecss from '@fullhuman/postcss-purgecss';

    ...

        svelte({
            preprocess: sveltePreprocess({
                sourceMap: !production,
            }),
            dev: !production,
            emitCss: true
        }),
        postcss({
            plugins: [
                purgecss({
                    content: [
                        './src/**/*.svelte',
                        './node_modules/svelte/*.js',
                    ],
                }),
                autoprefixer()
            ],
            extract: true,
            minimize: production,
            sourceMap: !production,
        }),
    ...

There are few things which might be interesting:

  1. style is global, because without that I get lots of 'unused CSS' warnings during the preprocess phase
  2. purgecss needs link to svelte/*.js as well, to keep styles used in svelte base
  3. postcss could be part of sveltePreprocess, but that gave me worse results, so I'm using standalone postcss with minification
  4. I've tried using standalone preprocess with just scss and globalStyle preprocessors (https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#stand-alone-processors), but that gave me same results as sveltePreprocess (time and file size was same)

Upvotes: 4

Antony Jones
Antony Jones

Reputation: 3180

You're not clear which part you are struggling with, but I will tell you how I am using Bulma with Svelte (and Sapper):

First of all, install the bulma dev dependency:

npm i -D bulma

then, install svelte-preprocess:

npm i -D svelte-preprocess

then, add svelte-preprocess to your rollup config:

  transformers: {
    scss: {
      includePaths: [
        'node_modules',
        'src'
      ]
    }
  }
}

Then, ensure you pass the preprocess option to the svelte rollup plugin. Do this for both server and client if you're using Sapper.

svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess: sveltePreprocess(scssOptions)
            }),

Add an scss entrypoint file which includes your bulma dependencies:

// scss-entrypoint.scss
@charset 'utf-8';

@import 'node_modules/bulma/sass/utilities/_all.sass';
@import 'node_modules/bulma/sass/base/_all.sass';
@import 'node_modules/bulma/sass/grid/columns.sass';
...

Then, include the sass file in your root level comoponent (App.svelte) or (_layout.svelte) in Sapper:

<svelte:head>
  <style src="path/to/your/scss-entrypoint.scss"></style>
</svelte:head>

And that's it. I've written an talk on this here. See this and the next 5 slides:

https://antony.github.io/svelte-meetup-talk-oct-2019/#27

and there is a working demo here:

https://github.com/antony/svelte-meetup-talk-oct-2019

Upvotes: 12

Related Questions