manuel3108/svelte-bulma-template

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(),
}