CodeSandbox で static な Sandbox を作ったけど Sass のコンパイルはしたい時

表題の通り。ローカルでサーバーを立てるどころか、Visual Studio Code を起動するのも煩わしい。全て CodeSandbox でやってしまおう、もちろん静的な HTML も。…と思って static な template の Sandbox を作ったものの、完全 static なので Sass のコンパイルもできない。せめて scss から css へのトランスパイルくらいはして欲しい。そんな場合のメモ。

とりあえず index.html と style.scss ファイルを作成。HTML のスタイルシートへのリンク href を scss にしておく。

index.html

<link rel="stylesheet" href="style.scss" />

Vanilla の正体は Parcel だった

「Files」の中の「sandbox.config.json」の Template を Vanilla に変更。Vanilla は Vanilla js のこと。つまり素の JavaScript なわけですが、Vanilla に変えた後に上の「Open File in editor」をクリックしてみると、sandbox.config.json の中身が下記に変わっている。Parcel やんか。

sandbox.config.json

{
	"template": "parcel"
}

参考：Sassの変換にオススメ！Parcel入門

以上。これだけで style.scss が Parcel で css に変換されて HTML に練り込まれる。ていうか Sass だけでなく、なんでもトランスパイルできるのだけど。

静的ファイルをビルドしたい

しかし /dist/style.css が生成されるわけじゃないし、index.html の中も style.scss のまま。CodeSandbox 上でプレビューするだけならこれでもいいけど、静的ファイルにするならどっかにデプロイしないとならない。

とりあえず Vercel (Now.sh) にデプロイする。Parcel で処理したファイルを Vercel に。
「Dependencies」から「Add dependency」で「parcel」を追加。
package.json の scripts.build に Parcel へのコマンドを書いておく。build して欲しいファイルは style.scss なんだけど、それだと style.css しかデプロイされないので、エントリーポイントとして index.html を指定。

package.json

"scripts": {
	"start": "serve",
	"build": "parcel build index.html --no-source-maps"
},

次に Vercel にもビルド内容を教える。「Other Configuration」から「now.json」を追加。

now.json

{
	"version": 2,
	"name": "project-name",
	"builds": [
		{
			"src": "package.json",
			"use": "@now/static-build"
		}
	]
}

そして「Deploy with Vercel」すると、静的 HTML と CSS がデプロイされる。