snowpack + scss環境の構築

※この記事は手探りでsnowpack環境を構築しており、ベストなやり方ではない可能性があります

前提

snowpackの公式より、app-template-blankのテンプレートを使用しております

npx create-snowpack-app app-blank01 --template @snowpack/app-template-blank

Sass環境を整える

公式にある通りsnowpack.config.jsonのscriptに"build:scss": "sass"のbuildコマンドを追加します。

sassをインストールします

$ npm install -D sass

snowpack CLIについて

コマンド

snowpackにはデフォルトでコマンドが用意されています（2020.05.24時点）

snowpack dev
snowpack build
snowpack install

dev

一時的な開発環境を用意するためのコマンドです。開発する際はこのコマンドを実行するのが良いと思います。devコマンドは不要なBindをせずに素早く起動するように工夫されております。詳しくは公式をご確認ください

build

バンドルされていないproduction用のファイルをbuildディレクトリにコピーします。これらはParselを通して実施されます。詳しくは公式をご確認ください

install

installコマンドはdev,buildコマンドに含まれているので自ら実施することはないでしょう。詳しくは公式を見てほしいのですが、使用しているESModuleをweb_modulesにインストールしています。これによりwebからimportできるようになっています。

スクリプト

snowpack.config.jsonを見るとpackage.jsonと同じようにscriptが設定されています

snowpack.config.json

  "scripts": {
    "mount:public": "mount public --to /",
    "mount:src": "mount src --to /_dist_"

snowpackのCLIには下記のTypeがあります。詳しくは公式を確認してもらいたいので、ここでは簡単に紹介します

build
run
mount
proxy

build

build時に実行したいコマンドを設定することができます。run時には実行されません

run

起動時に１回だけコマンドを実行します。lintやscssなどを設定するのに最適です

mount

ビルド時にファイルのマウント先を設定するのに使います

proxy

Proxyを設定することが出来ます。開発時にAPIリクエストでのCORSを対策するなどに便利です。これはProductionビルド時には適用されません

scssファイルを作成する

scssのトランスパイルを設定するために、srcディレクトリにscssファイルを作成します。ここではindex.scssとします

src/index.scss

body {
  color: red;
}

※scssファイルの中身はエラーが出なければなんでも構いません

snowpack + scss

snowpack.config.jsonにスクリプトを設定します。
上記の説明からrunコマンドに設定を書を書くと以下のようになります

snowpack.config.json

  "scripts": {
    ...
    "run:scss,scss": "sass src/index.scss public/index.css",
    "run:scss,scss::watch": "$1 --watch"
  }

追加した１行目は、sassコマンドを実行しその出力をpublicディレクトリに指定しています。
２行目は、１行目のコマンドに対してsassのwatchオプションを指定しています。

::

２行目のコマンドにある::と$1の詳細な説明は公式をご確認ください。
簡単に紹介すると、１行目のコマンドへのアドオンになり、$1は1行目のコマンドに置換されます。つまり以下のようになります。

sass src/index.scss public/index.css --watch

試してみます

ここまで設定したらpackage.jsonのスクリプトstartを実行してみてください

$ npm start

npm startは、snowpack devを実行しています。
ブラウザが立ち上がったら、src/index.scssを変更してみてください。変更が確認できれば完成です。

snowpack + scssからsnowpack CLIを知る