Gulpで使っているSASSを@importから@useへ移行する手順

Gulpで処理しているsassを@importから@useに移行する手順の覚書です。

まだ自分の環境も全て切り替えたわけではないですし、古い案件は大がかりなメンテナンスがないかぎりはそのままだと思いますが、そういうときに見返すことを目的にまとめました。

@useから@importへ移行する手順

移行する手順は次のようになります。

1. DartSassのパッケージをインストール
2. gulp-sassのコンパイラを切り替え
3. まとめて読み込むためのファイルを作成
4. 既存のファイルの@importを@use・@forwardへ書き換え

前半は環境の構築、後半はソースの修正となっています。では詳しく見ていきましょう。

DartSassのパッケージをインストール

Gulpで使っているgulp-sassはデフォルトではnode-sass(LibSass) を使用しています。これをDartSassに切り替えなければなりません。ということでまずはDartSassのパッケージをインストールします。注意点としてはDartSassのパッケージ名がsassという点です。

ターミナルから次のように入力すればOKです。

npm install --save-dev sass

gulp-sassのコンパイラを切り替え

gulpfile.js内でさきほどインストールしたsassを指定するコードを追加すればOKです。

const sass = require('gulp-sass');
sass.compiler = require('sass');

これでDartSassが使えるようになります。

まとめて読み込むファイルを作る

@importでは一番親のファイルに書くだけでmixinや変数をどのファイルからでも参照できましたが、@useではそういうことはできず、各ファイル毎に必要なファイルを@useで読み込ませる必要があります。また、変数やmixinの前に名前空間（デフォルトでは定義しているファイルのファイル名）を追加する必要もあります。次がその例です。

@use "mixin";
@use "color";
@use "variable";
@use "animation";

p {
   font-color:color.$theme;
   include mixin.mediaquery('pc'){
      font-size: variable.$article_text;
   }
}

この例のようにmixinや変数の定義を複数のファイルに分けて管理している場合、毎回@useがたくさん並ぶことになってしまいます。また、名前空間もファイル毎に使い分ける必要があるので、規模が大きくなるほど大変になりそうです。

そこで共通で使うmixinや変数をまとめて読みこむファイル（ここではimport.scssというファイル名とします）を一つ作り、それを各ファイルで読み込ませるという方法をとります。この章のタイトルにある「まとめて読み込むファイル」というのはそういう意味です。

注意点としてimport.scss内では@useではなく@forwardを使います。@useは読み込み元で定義されているものしか使えないという制約があるためです。

上記の例の場合、import.scssのソースは次のようになります。

@forward "mixin";
@forward "color";
@forward "variable";
@forward "animation";

各scssファイルには次のように読み込んで使います。

@use "import";

p {
   font-color:import.$theme;
   include import.mediaquery('pc'){
      font-size: import.$article_text;
   }
}

かなりシンプルに書くことができますね。何か追加したいときもimport.scssだけ編集すればよいのも便利です。

既存のファイルの修正

ここまでで@importを@useに切り替える準備ができました。あとは、既存のファイルを修正していきます。やることは次の2つです。

1. ファイル冒頭に@use "import"を記入
2. 既存のmixinや変数名の前に名前空間を追加

1番についてはそのままですね。2番について補足しておくと、デフォルトでは名前空間はファイル名になりますが、asを使うことで別の名前に変更することができます。自分しか使わない場合は短い表記にしておくと書く労力が少し楽になると思います。例えば上の例で名前空間をiとすると次のようにシンプルに書くことができます。

@use "import" as i;

p {
   font-color: i.$theme;
   include i.mediaquery('pc'){
      font-size: i.$article_text;
   }
}

実際に名前空間をつけていく作業は検索＆置換で頑張りましょう。変数名の場合は$で置換、mixinの場合はinclude もしくはmixinの名前で置換となります。もし忘れていてもエラーがでるのでデバッグはしやすいと思います。

以上で@importから@useへの移行は完了です。sassで複雑なことをしていなければ検索＆置換で比較的時間をかけずに移行することができると思います。