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

sass-scss-prograshi(プロぐらし)-kv CSS・SCSS
記事内に広告が含まれていることがあります。

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.
image.png
GitHub - webpack-contrib/sass-loader: Compiles Sass to CSS
Compiles Sass to CSS. Contribute to webpack-contrib/sass-loader development by creating an account on GitHub.
sass-loader | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capab...


sass-loaderとnode-sass(dart-sass)の違いは何か?

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

sass-loaderとは何か?

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


node-sassやdart-sassとは何か?

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

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


node-sassとdart-sassの違いは?

node-sassとは何か?

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

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


dart-sassとは何か?

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

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


node-sassをdart-sassに変更する方法

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

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

node-sassのアンインストール方法

yarnの場合

yarn remove node-sass

npmの場合

npm uninstall node-sass


dart-sassのインストール方法

yarnの場合

yarn add sass

npmの場合

npm install sass
注意点

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

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

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


タイトルとURLをコピーしました