Getting Started with Svelte + TypeScript + SCSS + VSCode: September 2020 Guide

TL;DR

Reading these two blog posts should be enough.

• How to setup Svelte with official Typescript support + TailwindCSS + SCSS - Geoffrey Hug
  • https://levelup.gitconnected.com/how-to-setup-svelte-typescript-tailwindcss-scss-bebdca7b2a0a
• Use Svelte with SASS/SCSS in VSCode - Dave Ceddia
  • https://daveceddia.com/svelte-with-sass-in-vscode/

---

Procedures below

Create a new Svelte project and enable TypeScript

npx degit sveltejs/template your-app-name
cd your-app-name
node scripts/setupTypeScript.js
yarn

Note: Use the following if you are initializing within an existing directory. Be careful as it will overwrite files like README.md.
npx degit sveltejs/template . --force

Note: If you use the following for the initial npx degit part, the next step "Enabling SCSS" is not required. TailwindCSS will also be included, though.

npx degit https://github.com/skflowne/svelte-ts-scss-tailwind-template your-app-name

Enabling SCSS

yarn add -D node-sass autoprefixer postcss

Edit rollup.config.js:

...
plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("bundle.css")
            },
	    // --- From here ---
            preprocess: sveltePreprocess({
                postcss: true,
                scss: {
                    includePaths: ["src"],
                    postcss: {
                        plugins: [require("autoprefixer")],
                    },
                },
            }),
	    // --- Around here ---
        }),
        // ...other plugins
]
...

Now, if you start writing <style> tags in hoge.svelte as <style lang="scss">, transpilation will occur when running yarn dev.

While you can start writing at this point, the Svelte extension in VSCode might complain that Sass is not installed for <style lang="scss">. To fix this, follow the steps below.

Additional settings for VSCode's Svelte extension

Open VSCode's Preferences > Settings
Search for Svelte and look for Svelte > Language-server: Runtime.
There, you need to provide the path to your node installation.
On Mac, you can get the path by running which node in your shell.
For Windows users, please refer to the second blog post mentioned at the beginning.

Once you have set it, restart VSCode, and the Svelte extension should no longer complain about <style lang="scss">.
If it still does, try creating a new svelte.config.js in the project root and adding the following code, then restart again.

svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

const preprocessOptions = {
    sourceMap: true, // "you would always want sourcemaps for the IDE" – dummdidumm
    defaults: {
        script: "typescript",
        style: "scss",
    },
    postcss: {
        plugins: [require('autoprefixer')()]
    }
};

module.exports = {
    preprocess: sveltePreprocess(preprocessOptions),

    // Export this to allow rollup.config.js to inherit the same preprocess options.
    preprocessOptions,
}

All that's left is to start writing

App.svelte

<script lang="ts">
	export let name: string;
</script>

<main>
	<h1>Hello {name}!</h1>
</main>

<style lang="scss">
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
</style>

To start the development server, run yarn dev