2020-09-07

Svelte + TypeScript + SCSS やってみる

公式で TypeScript サポートがアナウンスされていたので、ようやく Svelte を触る。

Svelte プロジェクトを作る

以下の TypeScript サポートのアナウンス記事に従って始めてみる。

参考：Svelte TypeScript

$ npx degit sveltejs/template practice-svelte
$ cd practice-svelte/

degit という Scaffolding をサポートするパッケージを利用しているみたい。GitHub のユーザ名・リポジトリ名、ブランチ名なんかを指定して、npm init (create-)react-app 的なことができるようだ。

Git 管理したかったのでとりあえず以下を入れておく。

$ git init
$ git commit --allow-empty -m 'Init'
$ git remote add origin https://github.com/Neos21/practice-svelte.git
$ git push

TypeScript を扱えるようにする

Svelte はデフォルトでは JavaScript で書けるモノだが、TypeScript でも書けるようになった。めっちゃお手製感のあるスクリプトでプロジェクトを TypeScript 化する。

参考：template/setupTypeScript.js at master · sveltejs/template · GitHub

$ node scripts/setupTypeScript.js

コレだけ。.svelte ファイル内では

<script lang="ts">

と書けば TypeScript として認識してくれるようになる。

SCSS を扱えるようにする

Svelte で SCSS を扱えるようにするには、svelte-preprocess と sass パッケージを入れて、rollup.config.js を軽く修正する必要がある。

参考：GitHub - sveltejs/svelte-preprocess: A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.

ただ、先程の TS 化スクリプトで svelte-preprocess パッケージと rollup.config.js の設定が入ったので、やることは sass のインストールだけで良い。

# node-sass を入れても良い
$ npm i -D sass

手作業で追加する場合は rollup.config.js に以下のように指定するだけで良いっぽい。この辺、バージョンによって仕様がコロコロ変わってるくさい。

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess()
    })
  ]
};

参考：Use Svelte with SASS/SCSS in VSCode
参考：Svelte.jsでSassをつかいたいー！｜KentarohSakaguchi｜note

.svelte の方は、<style lang="scss"> と lang 属性を追加すれば OK。Svelte は何もしないと <style> の内容がスコープ化される。逆に Global に適用するには一工夫必要っぽい。

参考：Global SASS/SCSS/Less/Stylus support · Issue #474 · sveltejs/sapper · GitHub

VSCode 拡張機能を入れる

シンタックスハイライトなどを効かせて開発効率を上げるため、Svelte for VS Code svelte.svelte-vscode を入れておく。

sass を入れたあたりでエラーが出るかもしれないが、VSCode を再起動すれば解消する。エラー解消のために svelte.config.js をどうこう、みたいな記事もみかけたが、自分は再起動だけでうまくいった。

成果物はコチラ

ココまで試してみた内容は以下にアップした。

Neos21/practice-svelte

GitHub Pages で動くように、public/index.html の記述を相対パスに変更して、GitHub Actions を使って自動デプロイされるようにした。

Neo's Practice Svelte App

以上。