Setting a dev environment

Using VSCode, a little hack is needed to use the Svelte extension by James Birtles with SCSS (see issue here).

TL;DR:

Add this line to settings.json

"svelte.language-server.runtime": "/usr/local/n/versions/node/10.16.3/bin/node"

Create svelte.config.js file at root of project with something like this in it:

const sass = require('node-sass');

module.exports = {
    preprocess: {
        style: async ({ content, attributes }) => {
            if (attributes.lang !== 'scss') return;

            return new Promise((resolve, reject) => {
                sass.render(
                    {
                        data: content,
                        sourceMap: true,
                        outFile: 'x', // this is necessary, but is ignored
                    },
                    (err, result) => {
                        if (err) return reject(err);

                        resolve({
                            code: result.css.toString(),
                            map: result.map.toString(),
                        });
                    },
                );
            });
        },
    },
};