【Rails・Webpacker】node-sassをdart-sassに変更する方法。sass-loaderとNode Sass, Dart Sassの違いは何か？（アンインストールとインストール）

CSS・SCSS

2023/10/1

記事内に広告が含まれていることがあります。

node-sassは非推奨

Rails6などwebpackerを使ったプロジェクトでsassをコンパイルするときに、「load-sass」と「node-sass」を使っている場合があります。

しかし、load-sassの公式ページを確認すると、現在では「Node Sass」は非推奨であり、「Dart Sass」を使うことが推奨されています。

We highly recommend using Dart Sass.

Node Sass does not work with Yarn PnP feature and dosen't support @use rule.

そもそも、sass-loaderとnode-sass（やdart-sass）は何が違うのかというと、webpackのツールかnode.jsのツールかの違いです。

sass-loaderとはwebpackのパッケージの一つで、webpackを使ってsassをcssにコンパイルするツールです。

sass-loaderを使うためにはnode-sassかdart-sassが必要になります。

node-sassやdart-sassはnpmのパッケージの一つで、sassファイルをコンパイルするものです。

node-sassはC++で書かれています。

メンテが難しくサポートが終了しており非推奨になっています。

dart-sassはJavaScriptで記述されており、現在でもメンテが行われています。

このため、node-sassではなく、dart-sassを使うことが推奨となっています。

node-sassをdart-sassに変更するには、まず、既存のnode-sassをアンインストールして、次に、dart-sassをインストールします。

ここではnpmとyarnのそれぞれの場合の方法を記載しています。お使いのパッケージ管理ツールに合う方をご使用ください。

yarn remove node-sass

npm uninstall node-sass

yarn add sass

npm install sass

注意点

フルネームは「dart-sass」ですが、パッケージ名はシンプルに「sass」です。

以上でdart-sassに置き換えが完了です。

ブラウザでリロード（キャッシュクリア）すれば、正しくコンパイルされていることが確認できます。