sveltekitではプリプロセッサにviteが使用されているため、特に何もしなくてもstyleタグに lang=”scss” を指定するとSCSS記法が使えます。
しかしグローバルのスタイル（routes直下にあるstyle.css）はどうすれば良いのか分からず、調べたときの記録です。
解決策
「Sveltekit scss issue」に答えが載っていました。
npx svelte-add@latest scss
npm installターミナルで上記を実行すると、
- srcディレクトリ直下に app.scssとvariable.scssの２ファイルが新設され、
- +layout.svelte に、「import “../app.scss”;」が追加され、
- svelte.config.jsとvite.config.jsにpreprocessの設定が加えられています。
あとはvariable.scssに変数やmixinを書き、app.scssにグローバルスタイルを移せば完了です。
もし、routes下のstyles.css を全く使わなくなるのでしたら、+layout.svelteのimport “styles.css” は消すかコメントアウトしておきます。
