🍉

Vite の恩恵にあずかりつつ HTML + SASS(SCSS) 中心なら Svelte がいいかもしれない

2022/07/06に公開

React も Vue.js も使わないけど HTML + SASS(SCSS) を中心としたモダンな環境が欲しい場合の選択肢として Vite + Svelte をおすすめしてみる

概略

  • さくっと紹介するつもりだったのにセットアップの手段が2つあって戸惑った
    • npm init vite だとシンプルだがルーティングできない
    • npm init svelte だとやや複雑だがルーティングできる
  • SASS を扱うのは簡単
    • npm i -D sass するだけ
  • 拡張子が svelte のファイルは HTML のサブセット
    • なので難しいことは考えずにただの HTML として扱えばいい

Vite 側のツールでセットアップする場合

セットアップ

cd ~/src
npm init vite my_app -- --template svelte
cd my_app
npm i
npm run dev -- --open

これで http://localhost:3000/ が開く

SASS対応

src/App.sass
html
  background-color: navy
  color: white
  • npm i -D sass を実行する
  • App.sass を新規で作成し src/main.jsimport './App.sass' としてインポートする

HTMLを書く

src/App.svelte
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>

既存の src/App.svelte を上の内容に書き換える
一部をそうするのではなく全体がその3行

ここまでやるとこうなる

とりあえず、

  • SASS の検証をする
  • HTMLを1枚作る

だけならこれで十分と思われる
ディレクトリ構成もシンプルなので余計なことに気を使う必要がない

ただしルーティングしたい場合は困る (続く)

Svelte 側のツールでセットアップする場合

まず npm init vite で作るとルーティングがないシンプルな構成になるのがわかった
一方 npm init svelte で作るとルーティング機能付きで生成してくれる
package.json を見ると @sveltejs/kit が含まれているのがわかる

セットアップ

cd ~/src
npm init svelte my_app
cd my_app
npm i
npm run dev -- --open
  • npm init svelte ではデモが含まれる構成を選択する
  • それを選択すると app.css が含まれているので後でどこに css ファイルを置くべきか迷わずにすむ

SASS対応

  • npm i -D sass を実行する
  • src/app.csssrc/app.sass にリネームして SASS 形式で書く
  • src/routes/__layout.svelte 内の app.css を app.sass に変更する

ルーティングの方法

  • src/routes 以下のディレクトリ構成がそのままURLになる
  • src/routes/foo.svelte を用意したら <a href="/foo">Foo</a> でリンクできる

Discussion