Add bulma and scss support

Use the examples from teh bulma documentation:
https://bulma.io/documentation/customize/with-node-sass/

package.json

@@ -9,13 +9,17 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "rollup": "^2.3.4",
+    "sass": "^1.29.0",
+    "postcss": "^8.0.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "rollup": "^2.3.4",
+    "svelte-preprocess": "^4.0.0",
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "bulma": "0.9.1",
     "sirv-cli": "^1.0.0"
   }
 }

public/index.html

@@ -7,7 +7,6 @@
   <title>Svelte app</title>
 
   <link rel='icon' type='image/png' href='/favicon.png'>
-  <link rel='stylesheet' href='/global.css'>
   <link rel='stylesheet' href='/build/bundle.css'>
 
   <script defer src='/build/bundle.js'></script>

rollup.config.js

@@ -3,6 +3,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -37,6 +38,24 @@ export default {
   },
   plugins: [
     svelte({
+      preprocess: sveltePreprocess({
+        defaults: {
+          style: 'scss',
+        },
+        scss: {
+          prependData: `@import 'src/styles/variables.scss';`,
+        },
+      }),
+      onwarn: (warning, handler) => {
+        if (
+          warning.code === 'css-unused-selector' &&
+          warning.filename.endsWith('App.svelte')
+        ) {
+          return;
+        }
+
+        handler(warning);
+      },
       // enable run-time checks when not in production
       dev: !production,
       // we'll extract any component CSS out into

src/App.svelte

@@ -1,30 +1,34 @@
-<script>
-  export let name;
-</script>
-
-<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
-
 <style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
+  :global {
+    @import 'src/styles/global.scss';
   }
+</style>
 
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
+<h1 class="title">
+  Bulma
+</h1>
 
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
+<p class="subtitle">
+  Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+</p>
+
+<div class="field">
+  <div class="control">
+    <input class="input" type="text" placeholder="Input">
+  </div>
+</div>
+
+<div class="field">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>Select dropdown</option>
+      </select>
+    </span>
+  </p>
+</div>
+
+<div class="buttons">
+  <a class="button is-primary">Primary</a>
+  <a class="button is-link">Link</a>
+</div>

src/styles/global.scss

@@ -0,0 +1,14 @@
+@import 'src/styles/variables.scss';
+@import 'bulma/bulma.sass';
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

src/styles/variables.scss

@@ -0,0 +1,21 @@
+// Set your brand colors
+$purple: #8A4D76;
+$pink: #FA7C91;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+
+// Update Bulma's global variables
+$family-sans-serif: "Nunito", sans-serif;
+$grey-dark: $brown;
+$grey-light: $beige-light;
+$primary: $purple;
+$link: $pink;
+$widescreen-enabled: false;
+$fullhd-enabled: false;
+
+// Update some of Bulma's component variables
+$body-background-color: $beige-lighter;
+$control-border-width: 2px;
+$input-border-color: transparent;
+$input-shadow: none;

svelte.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+  preprocess: sveltePreprocess({
+    defaults: {
+      style: 'scss',
+    },
+    scss: {
+      // We can use a path relative to the root because
+      // svelte-preprocess automatically adds it to `includePaths`
+      // if none is defined.
+      prependData: `@import 'src/styles/variables.scss';`,
+    },
+  }),
+};