https://github.com/manuel3108/svelte-bulma-template

https://github.com/manuel3108/svelte-bulma-template

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/manuel3108/svelte-bulma-template
• Owner: manuel3108
• Created: 2020-07-19T11:24:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-12T17:09:45.000Z (almost 4 years ago)
• Last Synced: 2024-10-04T19:26:22.800Z (about 2 months ago)
• Language: JavaScript
• Size: 26.4 KB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte bulma template

This is a modified [svelte template](https://github.com/sveltejs/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](https://github.com/manuel3108/svelte-bulma-template#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:

```js

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:

```js

  @import "main.scss";

```

And ther you go!

You should now be able to use something like:

```html

Button

```

Now you should see a nice looking [Bulma Button](https://bulma.io/documentation/elements/button/)

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

```js

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

module.exports = {

    preprocess: sveltePreprocess(),

}

```