Saturday, 27 July, 2019 UTC
Summary
If you’ve grown to love SASS/SCSS, you pretty much want to use it everywhere. The new Svelte framework, though exciting, doesn’t have SCSS support built in. But it’s simple to add!
Follow these steps to get SASS support in your Svelte app, plus get SASS syntax highlighting in VSCode.
Add SASS Support to the Project The first piece of this puzzle is to get your project able to build with SASS enabled.
We’ll start with the standard Svelte template, installed with
degit:npx degit sveltejs/template svelte-with-sass (by the way, if you’re going to run this command more than once or twice, I recommend installing
degit permanently with npm i -g degit instead of calling it with npx. It’s much faster!)Then
cd into the new project, install everything, and also install the svelte-preprocess package.cd svelte-with-sass npm install npm install svelte-preprocess Open up the
rollup.config.js file that came with the project. There are just a couple changes to make:// add this import: import autoPreprocess from 'svelte-preprocess'; // and inside the svelte plugin, add autoPreprocess: export default { /* ... */ plugins: [ svelte({ /* ... */ preprocess: autoPreprocess() }) }), /* ... */ } We’re importing the
svelte-preprocess auto-preprocessor, and adding the preprocess step to the svelte plugin that’s already there. Order doesn’t matter here; I just put the preprocess key at the bottom.Save that file and test it out by running
npm run dev. Everything should still work.Now try testing it with some SCSS. I changed
App.svelte to look like this:<script> export let name; </script> <style type="text/scss"> $color: red; h1 { color: $color; } div { background: green; > p { color: #fff; } } </style> <h1>Hello {name}!</h1> <div> <p>SASS is working!</p> </div> After that, try
npm run dev again, open up the page, and it should look something (awful) like this:Here is a starter template based on the
Svelte with SASS in VSCode sveltejs/template, but with the changes applied to get SASS working: https://github.com/dceddia/svelte-sass-template. You can use it locally with degit, too: degit dceddia/svelte-sass-template my-project.If you use VSCode, there’s one thing left to do to get SASS syntax highlighting in your Svelte files.
First, make sure you have the Svelte VSCode extension installed.
Then, open up your VSCode settings, type “svelte” in the search box, and look for this option called “Svelte > Language-server: Runtime”:
In the box, enter the location of your Node.js binary.
To find where this is:
- On a Mac or Linux system, open a terminal and run
which node - On Windows, open a terminal and type
where node
Take that path and enter it in the “Svelte > Language-server: Runtime” box.
On my Mac, that’s
/usr/local/bin/node, but yours might be different, so don’t just blindly copy mine ;)Windows…
If you’re on Windows, you might need to take more… drastic measures.
If your Node path has a space in it (like
C:\Program Files\nodejs\node.exe), you might have better luck with the “short path” like C:\Progra~1\nodejs\node.exe.If that still doesn’t work, you might have some luck setting the path to some gibberish that will definitely fail. Something like
C:/REMOVE_THIS_LATER. According to @fvbixn on Twitter, that caused the server to initially fail, but then it auto-retried and worked the second time. And also make sure it starts with C:/ or it won’t work. Very strange… but hey, whatever works!Restart VSCode
After that’s done, restart VSCode. You should be able to open the same sample
App.svelte file I showed above, with the SASS syntax, and not see any syntax errors.Set the Format on <style> Tags
In your own files, just make sure to add
type="text/scss" or lang="scss" to any style tags where you want to use SASS/SCSS, or it won’t work!Have fun!
Use Svelte with SASS/SCSS in VSCode was originally published by Dave Ceddia at Dave Ceddia on July 27, 2019.
CodeProject