svelte bulma template

This is a modified svelte template, to include the bulma css, which is installed through npm.

how to use

There are three options:

• use the github template feature, to create a new repository based on this codebase
• clone this repository and apply any changes you want+
• follow the steps in setup

setup

First install bulma and a rollup helper plugin:

npm i -D svelte-preprocess node-sass autoprefixer postcss

Go to your rollup.config.js and apply the following changes:

import svelte from 'rollup-plugin-svelte';
// ....
import sveltePreprocess from 'svelte-preprocess';

export default {
    plugins: [
        svelte({
            preprocess: sveltePreprocess({
                sourceMap: !production,
                scss: {
                    includePaths: [
                        'node_modules',
                        'src'
                    ]
                },
                postcss: {
                    plugins: [require('autoprefixer')()]
                }
            }),       
            // other svelte stuff
        })
        // all other plugins
    ]
};

Go to your App.svelte and import the following:

<style global lang="scss">
  @import "main.scss";
</style>

And ther you go!

You should now be able to use something like:

<button class="button">Button</button>

Now you should see a nice looking Bulma Button

If you are using VSCode, you should add the following file to make the language-server happy: svelte.config.js:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
}