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

ディレクトリを作成

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

mkdir src\scss      
mkdir public\css

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

Sassをインストール

yarn init -y   
yarn add sass --dev

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

package.json

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

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

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

yarn 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を使えば、ブラウザにもリアルタイムで反映できるようになるのでオススメです。