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

---

弊社ウェブサイトでは、技術記事の他にもデザインナレッジや日々の気づき等を配信しています。
https://www.jbgoode.jp/

カジュアル面談も実施中です。お気軽にお問い合わせください。
https://www.jbgoode.jp/recruit/