ASP.NET CoreとSassを一緒に使いファイル変更時にビルドする方法

前提

今回使用した .NET Coreのバージョンは以下です。

$ dotnet --version
6.0.401

ASP.NET Coreプロジェクト作成

まず、普通にASP.NET Core MVCのプロジェクトを作成する。

dotnet new mvc -o MyMvcApp

作成したプロジェクトのディレクトリへ移動

cd MyMvcApp

Sassのビルド環境を作成

今回はSassのビルドに「node-sass」を使います。これは名前のとおりNodeのパッケージなので、package.jsonファイルを作成します。ターミナルから次のコマンドを実行します。

npm init -y

次に「node-sass」をインストールする。

npm install node-sass

次に、Sassのソースを格納する wwwroot/sassディレクトリを作ります。ここ.scssファイルを作成し、後でビルドする設定をします。

mkdir wwwroot/sass

次に、package.jsonにSassをビルドするためのコマンド追加します。

  "scripts": {
    "sass": "node-sass -w wwwroot/sass -o wwwroot/css"
  },

これでSassが使えるようになりました。
次は、簡単なSassのサンプルコードを書いて実際にビルドしてます。

Sassビルドツールの実行

scssファイルをビルドします。
まず、ターミナルで次のコマンドを実行して、Sassのビルドツールを実行します。

npm run sass

package.jsonに設定した内容により、wwwroot/sassフォルダ内の*.scssファイルに変更があると、自動でビルドが行われます。

実際にscssファイルを作ってビルドしましょう。
wwwroot/sass/sample.scss の名前でファイルを作り次のコードを書きます。

$brand-color: #5D2E8C;

body {
  background-color: $brand-color;
}

Sassファイルを手動でCSSにコンパイルするのは非効率的なので、自動的にコンパイルするためのスクリプトをpackage.jsonに追加します。
すると、wwwroot/cssの下にビルドされたファイルが出力されます。

body {
  background-color: #5D2E8C; }

ASP.NET CoreのデバッグとSassのビルドを同時実行

このままでの内容では、ASP.NET Coreアプリをデバッグ実行するたびに dotnet watch run と npm run sass の2つのコマンドを実行する必要があり、少し煩雑です。
そこで「concurrently」というnpmパッケージを使ってASP.NET Coreアプリのデバッグ起動とSassのビルドを1つのコマンドで実行できるようにします。

まず、ターミナルで次のコマンドを実行して「concurrently」をインストールします。

npm install --save-dev concurrently

package.jsonファイルのscripts部分に、watchとdevの設定を追加して以下のように書き換えます。

  "scripts": {
    "sass": "node-sass -w wwwroot/sass -o wwwroot/css"
    "watch": "dotnet watch run",
    "dev": "concurrently \"npm run sass\" \"npm run watch\""
  }

これでnpm run devコマンドを実行すると、dotnet watch runとnode-sass -w wwwroot/css -o wwwroot/cssの2つのコマンドが同時に実行され、C#とSassの変更を同時に監視するようになります。

npm run dev