Live Sass Compilerをやめてnpmスクリプトに移行する

概要

これまでVS Codeの拡張機能「Live Sass Compiler」を使用してSCSSをコンパイルしていましたが、環境（設定やバージョン）によって出力されるCSSに差分が生じる問題が発生しました。

この問題を解決し、チーム全員が同じ設定でコンパイルできるように、npm scriptsを利用した管理に移行した際の手順をまとめます。

起きていた問題

VS Codeの拡張機能設定を同じにしても、出力結果に微妙な差分が出る。

解決策：npmスクリプトへの移行

プロジェクト自体にコンパイル環境を持たせることで、OSやエディタ環境に左右されない「共通のコンパイル設定」を構築します。

1.Node.jsのバージョン設定

古いバージョン（v14など）を使用していると、最新のSass機能が使えない可能性があるため、安定したバージョンに変更します。今回は nodenv を使用してプロジェクトのローカルバージョンを指定しました。

# 現在のバージョン確認
node -v
# v14.17.1 (古い)

# 利用可能なバージョンを確認して切り替え
nodenv versions
nodenv local 20.18.2

# 切り替わったか確認
node -v
# v20.18.2

# 切り替わったか確認
node -v
# v20.18.2

2.Sassパッケージのインストール

プロジェクトのルートディレクトリで公式の Sass（Dart Sass）をインストールします。

# package.jsonがない場合は初期化
npm init -y

# Sassを開発用依存関係(devDependencies)としてインストール
npm install -D sass

3.package.json にスクリプトを追加

package.json の scripts セクションにコンパイル用のコマンドを追記します。これにより、パスの設定やオプション（Source Mapの有無など）を共通化できます。

コード スニペット
{
  "scripts": {
    "sass:watch": "sass --watch src/scss:dist/css --style expanded --no-source-map",
    "sass:build": "sass src/scss:dist/css --style compressed --no-source-map"
  }
}

–watch: ファイルの変更を監視して自動コンパイル

–style expanded: 開発時に読みやすい形式で出力

–style compressed: 本番公開用に圧縮して出力

–no-source-map: 今回はソースマップを出力しない設定

4.実行方法

チームメンバーはリポジトリをクローンした後、以下のコマンドを叩くだけで全員同じ設定で監視が始まります。

# 初回のみ
npm install

# 監視開始
npm run sass:watch

5. .gitignore の確認

不要なファイルがリポジトリに混入しないよう、.gitignore ファイルに以下が記述されているか確認します。

node_modules
.DS_Store