Notes for building features into Sapper

bulma.md

Sapper Bulma Setup

Bulma

yarn add -D bulma sass svelte-preprocess

rollup.config.js

import { scss } from 'svelte-preprocess';
// export default...
svelte({
  preprocess: [
    scss({
      omitSourceMapUrl: true,
      includePaths: [
        'node_modules',
        'src'
      ]
    })
  ]
})

src/scss/global.scss

@import 'node_modules/bulma/bulma.sass';

Font Awesome Setup

yarn add -D @fortawesome/fontawesome-free

client.js

import '@fortawesome/fontawesome-free/js/all';

spectre.md

Sapper Spectre Setup

yarn add -D spectre.css rollup-plugin-css-only

rollup.config.js

import css from 'rollup-plugin-css-only';
// export default...
plugins: [
  css({ output: 'static/index.css' }),
  // svelte({})...
]

src/client.js

import 'spectre.css/dist/spectre.min.css';
import 'spectre.css/dist/spectre-exp.min.css';
import 'spectre.css/dist/spectre-icons.min.css';

src/template.html

<link rel="stylesheet" href="index.css" />

tailwindcss.md

Sapper Tailwindcss Setup

yarn add -D tailewindcss postcss-cli @fullhuman/postcss-purgecss
./node_modules/.bin/tailwind init tailwind.js

Create a postcss.config.js file:

const tailwindcss = require('tailwindcss');

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

Create static/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update package.json:

"scripts": {
  "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
  "build:tailwind": "SET NODE_ENV=production postcss static/tailwind.css -o static/index.css",
  "build": "yarn build:tailwind && sapper build --legacy"
}

Add stylesheet link to src/template.html:

<link rel="stylesheet" href="index.css" />

Compiles and hot-reloads for development

yarn watch:tailwind

yarn dev

Compiles and minifies for production

yarn build