前記事では WordPress のテーマ開発をプラグインの wp-sass から gulp を使う方法に変更しました。その際のコード const sass = require('gulp-sass')(require('sass')); が気になりましたので Sass の公式サイトを読んでみました。
01LibSass を使った node-sass は非推奨
Sass はそれなりに長く使っているのですが、CSS を書くための便利なもの程度にしか理解していませんでしたので、今回あらためて公式サイトなどを読み理解を深めようと思います。
私は gulp を使っていますので、gulp-sass をインストールしていますが、他にも node-sass, LibSass, Dart Sass などの言葉をよく目にします。
こういうことのようです。
公式サイトを読んでの私の判断ですが、Sass には
- Dart Sass （最新の Sass 実行環境）
- LibSass （ライブラリなのでラッパーが必要、現在非推奨）
- Ruby Sass （最初に開発された Sass、2019.3.26 サポート終了）
があり、これからは Dart Sass を使いなさいということになります。
で、gulp-sass や node-sass とはなにかですが、LibSass という Sass ライブラリを使った実行環境ということになるんだろうと思います。
ということは、gulp-sass でも node-sass ではなく Dart Sass を使ったパッケージに変更する必要があります。
02gulp-sass で Dart Sass を使う方法
で、前記事の const sass = require('gulp-sass')(require('sass')); の件です。
gulp で Sass パッケージを読み込む場合に、
const sass = require('gulp-sass')としますと、
gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the “sass” and “node-sass” packages are permitted.
For example, in your gulpfile:const sass = require(‘gulp-sass’)(require(‘sass’));
というエラーになります。「gulp-sass はデフォルトコンパイラではなくなりましたので、たとえば次のようにしてください」ということです。
このコードの意味ですが、gulp-sass の Readme を読みますと、
To use gulp-sass, you must install both gulp-sass itself and a Sass compiler. gulp-sass supports both Dart Sass and Node Sass, although Node Sass is deprecated. We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass when possible.
Whichever compiler you choose, it’s best to install these as dev dependencies:
npm install sass gulp-sass –save-dev
（gulp-sass）
とあります。
「gulp-sass は Dart Sass, Node Sass の両方をサポートしているが Node Sass は非推奨である。新しいプロジェクトには Dart Sass の使用をすべきである」ということで、そのためには、sass と gulp-sass をインストールして次の1行のように読み込めば両方に対応できるということになります。
const sass = require('gulp-sass')(require('sass'));03gulp-dart-sass を読み込めばいいのではないか
では、新しいプロジェクトで Dart Sass だけに対応すればいい場合にはどうすればいいんでしょう。
gulp-dart-sass パッケージがあります。
$ npm install gulp-dart-sass --save-devでインストールし、
const gulp = require('gulp');
const sass = require('gulp-dart-sass');で読み込み、後はこれまでのコードと同じように使えます。また、通常は非同期で動いているらしく、sass.sync() として同期で動かせば2倍早くなるそうです。
ただ、1、2行のサンプルコードでは全く変わりません。おそらくコンパイルするソースが大きくなればなるほどその違いがはっきりしてくるのでしょう。
やはり定期的に公式を読む習慣をつけないとダメですね。
