node-sassとdart-sassの差分比較

はじめに

以下の環境でnode-sassからdart-sassに移行しました。

• React18
• Javascript
• yarn パッケージマネージャ

しっかり移行できたか確認したいので、 node-sass・dart-sassの両方でscssのファイルをcssにビルドして 差分を比較します。

手順

1. まず、プロジェクトに両方のパッケージをインストールしてください。

   npm install node-sass
   npm install sass
   

2. 次に、SCSSファイルをそれぞれのコンパイラでビルドするための npm スクリプトを追加してください。package.jsonファイルに以下のように記述します。

   {
     "scripts": {
       "build:node-sass": "node-sass input.scss output-node-sass.css",
       "build:dart-sass": "sass input.scss output-dart-sass.css"
     }
   }
   

   上記のコードでは、input.scssを入力ファイル、output-node-sass.cssとoutput-dart-sass.cssをそれぞれのビルド結果として出力しています。適切なファイル名に変更してください。

3. それぞれのスクリプトを実行して、CSSファイルを生成します。

   npm run build:node-sass
   npm run build:dart-sass
   

4. 生成された2つの CSS ファイルを比較します。差分比較ツール（例：diffコマンド、VSCode の比較機能、またはオンラインツールなど）を使用して、output-node-sass.css と output-dart-sass.css ファイルの違いを見つけます。

   diff output-node-sass.css output-dart-sass.css
   

   差分がなければ、移行が正常に行われています。もし差分がある場合は、問題を特定し修正してください。主に、関数の使用方法や Dart Sass で非推奨になった機能に注意してください。

   これらの手順に従って、node-sass と dart-sass で生成された CSS ファイルの差分を比較し、移行が適切に行われているか確認できます。

複数のファイルを一括で行いたい場合

1. プロジェクトに両方のパッケージをインストールしてください。

   yarn add node-sass
   yarn add sass
   

2. 次に、package.jsonファイルに、全ての SCSS ファイルをそれぞれのコンパイラでビルドするための Yarn スクリプトを追加してください。

   {
     "scripts": {
       "build:node-sass": "node-sass scss/ -o dist-node-sass/",
       "build:dart-sass": "sass scss/ dist-dart-sass/"
     }
   }
   

   上記のコードでは、scss/ディレクトリ内のすべての SCSS ファイルを入力として、それぞれのビルド結果をdist-node-sass/とdist-dart-sass/ディレクトリに出力しています。適切なディレクトリ名に変更してください。

3. それぞれのスクリプトを実行して、CSSファイルを生成します。

   yarn run build:node-sass
   yarn run build:dart-sass
   

4. 生成された dist-node-sass/ と dist-dart-sass/ の両ディレクトリにある CSS ファイルの差分を比較します。差分比較ツールを使用して、それぞれのファイルの違いを見つけます。

   Unix系OSであれば、diffコマンドを使ってディレクトリ内のファイルを再帰的に比較することができます。

   diff -r dist-node-sass/ dist-dart-sass/
   

   もし差分がある場合は、問題を特定し修正してください。主に、関数の使用方法や Dart Sass で非推奨になった機能に注意してください。

   これらの手順に従って、scss/ディレクトリ内の全ての SCSS ファイルを node-sass と dart-sass でビルドし、生成された CSS ファイルの差分を比較して、移行が適切に行われているか確認できます。