More than 1 year has passed since last update.

node-sassをdart-sassへ移行したい

Last updated at 2023-04-27Posted at 2023-04-27

はじめに

以下の環境でnode-sassをdart-sassに移行する機会があったので、
それぞれの違いや移行手順を共有します。

Node-sassは、Node.jsを使ってSass (Syntactically Awesome Style Sheets) をコンパイルするためのツールです。
SassはCSSの拡張言語で、より効率的で簡単なスタイルシートの記述が可能です。

ただし、Node-sassは開発が停止しているため、新規プロジェクトではDart-sassを使用することが推奨されています。

Dart-sassは、CSSの拡張言語であるSass（Syntactically Awesome Style Sheets）をコンパイルするためのツールです。Sassを使用することで、変数やネスト、ミキシンなどの便利な機能を使って、効率的で簡単なスタイルシートの記述が可能になります。

Node-sassは、C/C++で書かれたLibSassを使用していますが、Dart-sassはDart言語で実装されています。
Dart-sassはSassの公式実装で、最新の機能やバグ修正が随時サポートされています。一方、Node-sassおよびLibSassは開発が停止しており、今後のメンテナンスやアップデートは予定されていません。
Dart-sassは、モジュールシステムや新しい関数などの新機能に対応していますが、Node-sassではこれらの機能が利用できません。
Dart-sassは、パフォーマンス面でNode-sassよりも若干遅

公式サポート: Dart-sassはSassの公式実装であり、最新の機能やバグ修正が継続的に提供されます。一方で、Node-sass（LibSassベース）は現在開発が停止しており、今後のメンテナンスやアップデートは予定されていません。
新機能への対応: Dart-sassは新しいSass機能に対応しています。例えば、モジュールシステム（@useおよび@forward）や、新しい数学関数（math.div()やmath.sin()など）を利用できます。
より良いエラーレポート: Dart-sassは、エラーが発生した際により詳細で分かりやすいエラーレポートを提供します。これにより、問題の特定と解決が容易になります。
互換性と拡張性: Dart-sassは将来のSass言語の進化に追従し、新しい機能や最適化が利用できるようになります。これにより、プロジェクトの互換性と拡張性が確保されます。
環境に依存しない: Dart-sassはDart言語で実装されており、C/C++バインディングに依存しないため、環境間での互換性が向上します。

ただし、Dart-sassはパフォーマンス面でNode-sassよりも若干遅いことがある点には注意が必要です。しかし、公式サポートや新機能の利用、環境間での互換性が向上することを考慮すると、Node-sassからDart-sassへの移行はお勧めです。

Node-sassからDart-sassへの移行を分かりやすく説明すると、以下の手順になります。

Node-sassをアンインストール:
プロジェクトのディレクトリで、次のコマンドを実行してnode-sassをアンインストールします。
```
npm uninstall node-sass
```
Dart-sassをインストール:
Dart-sassはnpmのsassという名前でパッケージされています。次のコマンドでインストールします。
```
npm install sass
```
スクリプトの変更:
package.json内のscriptsセクションで、Sassのコンパイルに関するスクリプトがnode- sassからsassに変更されていることを確認します。例えば、次のようになります。
```
"scripts": {
"build:css": "sass src/styles/index.scss dist/styles/index.css",
...
},
```
インポートステートメントを更新:
プロジェクト内のすべてのSassファイルのインポートステートメントを更新して、新しいファイル拡張子（.sassまたは.scss）を含めるようにします。これは、Dart-sassの仕様に沿ったものです。

例:
```
// 以前
@import 'variables';

// 更新後
@import 'variables.scss';
```
必要に応じてその他の変更を行う:
Dart-sassでは、一部の関数やミキシンが変更されています。そのため、プロジェクト内のSassファイルでこれらの変更に対応する必要があるかもしれません。詳細は、公式のmigration guideを参照してください。

移行が完了したら、プロジェクトをビルドし、Sassが正しくコンパイルされていることを確認してください。これで、Node-sassからDart-sassへの移行が完了しました。