Sapper/Svelte SASS preprocessing?

I've read a lot about SASS preprocessing, and it doesn't seem like it is fully supported, but there are some docs on it. From what I could put together, I should be able to preprocess my tags after I made the following modifications to my webpack.client.config.js file:

You're mixing and matching Rollup and webpack, which are two different module bundlers — you're adding rollup-plugin-svelte to a webpack config, and webpack doesn't know what to do with it so it throws an error.

(Note that the style: sass() line will become preprocess: { style: sass() } in a future version of svelte-loader — see this issue).

By the way, it looks like you're using an older version of Sapper — there have been some major improvements recently, so it's worth upgrading to 0.9. Unfortunately it does mean making some changes to your project structure (see the migration guide for the details, or reclone sapper-template and copy your routes folder over).

See also questions close to this topic

I'm trying to build a docker image that optionally adds a yarn (or npm lockfile) while building. I'd like to add it explicitly, but also not fail the build if it isn't included.

The intent is to respect it if the hosted application uses a deterministic build process, but not force it to. I'd also like to let an application use this container to bootstrap itself into deterministic builds.

I am fairly new to Svelte (I'm using version 2 until 3 is properly released) and I'm building a site that aims to do some audio analysis (FFT). I'm therefore incorporating the venerable ToneJS library (http://tonejs.github.io/) into one of my Components.

For some reason, merely importing ToneJS is enough to crash the whole application.

Here is the entirety of my Svelte Component:

<h2>Pitch analyser</h2>
<script>
import Tone from 'tone';
</script>

This causes the error:

Tone.js:7 Uncaught TypeError: Cannot assign to read only property 'listener' of object '#<AudioContext>'
at t.Context.set (Tone.js:7)
at t.Listener.<anonymous> (Tone.js:7)
at Function.e.getContext (Tone.js:7)
at new t.Listener (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Tone.js:1

It's possible that this is not specific to Svelte, but I've used Tone JS successfully in many other projects (including inside React, etc.) without any trouble.

What could be causing this? And how to start using ToneJS inside my Svelte app? (Packaged/transpiled using Rollup)