🍉

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

2022/07/06に公開

はじめに

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

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

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

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

src/App.sass

html
  background-color: navy
  color: white

npm i -D sass を実行する。App.sass を新規で作成し src/main.js に import './App.sass' としてインポートする。

src/App.svelte

<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>

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

ここまでやるとこうなる。

とりあえず、

だけならこれで充分だろう。ディレクトリ構成もシンプルなので余計なことに気を使う必要がない。ただしルーティングしたい場合は困る (続く)

まず 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 ファイルを置くべきか迷わずにすむ。

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

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