🍉
Vite の恩恵にあずかりつつ HTML + SASS(SCSS) 中心なら Svelte がいいかもしれない
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.js
にimport './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.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>
でリンクできる
Discussion