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

noteで書く
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*.*.*
noteで書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です