node-sassからDartSassに移行する手順

node-sassは2020年10月に非推奨となり、今後は新機能の追加が行われないことが決定しています。

警告: LibSass と Node Sass は非推奨です。メンテナンス リリースは引き続き無期限に提供されますが、機能を追加したり、新しい CSS や Sass 機能との互換性を追加したりする予定はありません。まだそれを使用しているプロジェクトは、 Dart Sassに移動する必要があります。

https://www.npmjs.com/package/node-sass

弊社アイ・クリエイトでも多くのプロダクトでnode-sassを使用しており、DartSassへの移行が必要となりました。

node-sassからDartSassに移行した際の覚書きをご紹介します。

1.node-sassをアンインストールする

shell

npm uninstall node-sass

2.sassをインストールする

shell

npm i -D sass

3.gulp-sassをgulpfileにインポートする

JavaScript

#gulpfile.js

const sass = require("gulp-sass");
↓差替え
const sass = require('gulp-sass')(require('sass'));

参照：https://www.npmjs.com/package/gulp-sass

4.gulp-sassをインストールする

Sassにおいて、calc（）の外部での除算に/を使用することは非推奨となり、将来的に廃止されます。
Dart Sass 1.33.0 以降では非推奨(deprecated)と表示されます。
参照：https://sass-lang.com/documentation/breaking-changes/slash-div

一旦、今まで作った古いプロジェクトはsass@1.32.13
これから作る新しいプロジェクトは最新のバージョンにしました。

古いプロジェクト

shell

npm i -D sass@1.32.13

新しく作るプロジェクト

shell

npm i -D gulp-sass@5.1.0

※最新バージョン確認： https://www.npmjs.com/package/gulp-sass

【補足】nodeのバージョンが違ってエラーになる場合

現在のバージョンを調べる

shell

node -v

インストールできるバージョン一覧を表示

shell

nvm ls-remote

バージョンを指定してインストール

shell

nvm install v＊.＊.＊

インストール済みのバージョン一覧を表示

shell

nvm list

使用するバージョンを変更

shell

nvm use v＊.＊.＊

デフォルトのバージョンを変更

shell

nvm alias default v＊.＊.＊