Svelte + TypeScript + SCSS + VSCode でプロジェクトを書き始めるメモ 2020/9版

TL;DR

この2このブログ読めばOK.

• 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/

---

以下手順書き出し

Svelte のプロジェクトを新規作成して TypeScript を有効にする

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

※既に存在するディレクトリ配下で初期化するときは以下。README.mdなどが上書き初期化されるので注意
npx degit sveltejs/template . --force

※最初の npx degit の部分を以下にすれば次項の「SCSS を使えるようにする」手順は不要。TailwindCSS も入っちゃうけど。

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

SCSS を使えるようにする

yarn add -D node-sass autoprefixer postcss

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")
            },
	    // --- ここから ---
            preprocess: sveltePreprocess({
                postcss: true,
                scss: {
                    includePaths: ["src"],
                    postcss: {
                        plugins: [require("autoprefixer")],
                    },
                },
            }),
	    // --- このへん ---
        }),
        // ...other plugins
]
...

これで hoge.svelte の <style> を <style lang="scss"> で書きはじめれば yarn dev でトランスパイルがかかるようになっている。

この状態でも書きはじめられるが、VSCode の Svelte 拡張に <style lang="scss"> の部分で sass が入ってないぞって怒られるので以下を実施

VSCode の Svelte 拡張に追加設定

VSCode の 基本設定 > 設定 を開き
Svelte で検索して出てくる Svelte > Language-server: Runtime に
node の場所を記載してやる。
Mac ならシェルで which node で出てくるパスを入れてやればOK。
Windows でのやり方は冒頭2こめのブログ参照

入れてやったら VSCode を再起動すれば、Svelte 拡張に <style lang="scss"> の部分で怒られなくなっている。
もしまだ怒られるようならプロジェクトルートに svelte.config.js を新規作成し、
以下のようなことを書けてから再度再起動すればいけるはず

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,
}

あとは書き始めるだけ

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>

開発サーバ起動は yarn dev