くろおーかみ*てっく

しがないくろおーかみの勉強記

Sassが編集されたときに自動反映させたい！ 〜Parcelを用いたSass自動コンパイル環境の構築方法〜

Sass Parcel yarn

こんばんは、y-mix( @bwolftech )です！

実は触れていなかったSassのコンパイル方法を工夫したので書いておきます。
コチラは Sassのみを勉強するための構成を想定しているので 実際のプロダクトではまた別の方法になると思います。

Sassのコンパイルについて

使い方によってはCSSよりも記述量が減らせるSassは便利なのですが、書いた結果を見たいときは コンパイルが必要です。
ProgateでいうとSass/HTMLを変更した結果が見たいときはプレビュー画面の右上にある ぐるぐる回りそうなボタンをクリックする必要があります。

これが手元の開発環境だと

  1. ちょこっと編集したから確認したい！
  2. コンパイル
  3. HTMLを開いているブラウザーの更新ボタンを押す

という手順を踏まなければなりません。

これを解決するためにParcelを導入します。

本来は複数のJavaScriptなどのファイルをまとめるモジュールバンドラとして使われますが、ファイルの変更を監視してブラウザで開いている内容を自動的に更新してくれる機能もあります。

モジュールバンドラとしてよく使われるのがWebpackなのですが、Sassファイルの自動コンパイルだけが目的なのでお手軽にParcelを使います。

Parcelを用いたSass自動コンパイルの方法

1. Node.jsとyarnの環境を用意する

Parcelを用いるには Node.jsとnpm/yarnの環境が必要です。また、npx を使うため、npm 5.2.0 以上が必要です。
環境構築について書きません。

2.プロジェクトを始める

次の構成でディレクトリを作ったあと、次の構成で sass-parcel-sample ディレクトリを作ります。

sass-parcel-sample
└── src
    └── scss

次に sass-parcel-sample 内で Node.js のプロジェクトを始めます。yarn をチョイスしました。

cd sass-parcel-sample
yarn init -y

3. パッケージを入れる

Parcelが使えるようにパッケージを入れます。

yarn add -D parcel

4. Sassを読み込むHTMLを作る

次の構成でファイルを3つ作ります。

sass-parcel-sample
└── src
    ├── app.js
    ├── index.html
    └── scss
        └── style.scss

HTMLではJavaScriptファイルを読み込んで、JavaScriptファイルではSassを読み込む形にしています。

src/index.html

<!<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Parcel Sample</title>
</head>

<body>
  <h1>Parcel</h1>
  <script src="./app.js"></script>
</body>

</html>

src/app.js

import './scss/style.scss';

./src/scss/style.scss

$sampleColor: #ABCDEF;

body {
  h1 {
    color: $sampleColor;
  }
}

5. Scssをコンパイルする

ファイルができたら src/index.html を指定してParcelを実行します。

npx parcel ./src/index.html

6. http://localhost:1234/ で確認する

HTMLを開く代わりにブラウザで http://localhost:1234/ を開きます。

そして src に置いてあるSassファイルやHTMLファイルをエディターで変更して保存すると ブラウザーの更新ボタンを押さなくてもすぐに反映されます！

Parcelによってビルドされたファイルは dist に保存されますが、 -d オプションで変更することができます。

npx parcel ./src/index.html -d public

オチ

…どの方法でコンパイルしようか迷うと作品に取り書かれる時間が減っていくわけですね！

参考