【gulp】import sass from ‘sass’ is deprecated. ～エラーの解決方法

最近のアップデートにより、import sass from ‘sass’ の使用が廃止され、新しいインポート方法が推奨されています。この記事では、その詳細と対応方法を紹介します。

旧インポート方法の問題点

これまで、Sassモジュールをインポートする際には以下のように記述していました。

import sass from 'sass';

しかし、この方法は現在廃止されているようです。

新しいインポート方法では、以下のように記述します。

import * as sass from 'sass';

実際のコード例を用いて、新しいインポート方法を確認します。

import * as sass from 'sass';

const result = sass.renderSync({ file: 'style.scss' });

console.log(result.css.toString());

この例では、sass.renderSync メソッドを使用して、style.scss ファイルをコンパイルし、結果のCSSをコンソールに出力しています。

Sassモジュールのインポート方法が変更されたことにより、コードの書き方も少し変更が必要となります。import * as sass from ‘sass’ を使用することで、エラーが出なくなります。