yarnでSassの環境構築をする手順と方法

yarnでSassの環境を構築する方法です。

ディレクトリを作成

まずはディレクトリを作成します。

mkdir src\scss      
mkdir public\css

srcディレクトリがSass。publicディレクトリにcssを出力するようにします。

Sassをインストール

yarn init -y   
yarn add sass --dev     

上記コマンドでSassをインストールします。

package.json

package.json

{
  "scripts": {
    "sass": "sass src/scss:public/css"
  }
}

package.jsonに上記を記述します。

srcディレクトリにSassファイルを作成する。

画像のようにsrcディレクトリにSassファイルを作成します。

yarn sass

を実行することでcssファイルが出力されます。

Sassを変更したらリアルタイムでcssファイルを更新する

上記だけでもSassをcssに変換できますが、変換するにはyarn sassコマンドを都度実行する必要があります。
sassを変更したらリアルタイムでcssファイルを更新するように設定を追加します。

yarn add watch browser-sync --dev

をインストール後にpackage.jsonに下記を記述します。

package.json

{
  "scripts": {
    "sass": "sass src/scss:public/css",
    "sass-watch": "sass --watch src/scss:public/css" // 追加
  }
}

これで設定は完了です。

yarn sass-watch

上記コマンドを実行することで、scssの変更を検知できるようになります。
リアルタイムで変更がcssに反映されます。

最後に

本記事では、yarnでSassの環境構築をする方法についてまとめました。
さらに、VS CodeのプラグインLive Serverを使えば、ブラウザにもリアルタイムで反映できるようになるのでオススメです。