【Dart Sass】Sassコンパイル環境の移行と高速化！

LibSass（gulp-sass4系、node-sass）からDart Sass（gulp-sass5系、sass）へのgulp環境の移行手順について解説していきます。LibSassのサポート終了に伴い、Dart Sassへ移行しようとしてエラーでハマって進んでない方やこれから移行しようとしている方は是非読んでみてください！

環境

PC環境

MacBook Pro 2021年版（Appleプロセッサ：M1）

移行前

Node.js：12.17.0
Sassコンパイラ：LibSass

移行後

Node.jp：14.19.1
Sassコンパイラ：Dart Sass
※ Dart Sass（gulp-sass 5系）には Node.js12以上、gulp4以上が必須となります。

移行手順

gulp-sass（5系）のインストール

コマンドで最新のgulp-sass（5系）をインストールしましょう。

ローカルインストールの方はこちら

		npm i -D gulp-sass

package.json を確認して、5以上のバージョンとなっていれば問題ないです。

		"devDependencies": {
			"gulp-sass": "^5.1.0",
		},

グローバルインストールの方はこちら

		npm i -g gulp-sass

確認コマンドを実行して5以上のバージョンが指定されていれば大丈夫です。

		npm ls -g gulp-sass
		(out)└── gulp-sass@5.1.0

gulpfile.jsの修正

gulpfile.jsの編集内容について解説します。

Dart Sassを指定してrequire

gulp-sass5系では、requireで'sass'と記載しSassコンパイラを明示的にDart Sassに指定する必要があります。何も指定しない場合は、LibSassになります。

		// ★★★ Dart Sass指定★★★ 
		const sass = require('gulp-sass')(require('sass'));
		// LibSass指定
		const sass = require('gulp-sass');

ちなみにgulp-sass4系では以下のようにSassコンパイラを指定します。

		const sass = require("gulp-sass");
		// LibSass指定
		sass.compiler = require("node-sass") 
		// Dart Sass指定
		sass.compiler = require("sass");

コンパイルにはsync関数を使用

		.pipe(sass(options))

から

		.pipe(sass.sync(options))

へ変更。同期レンダリングという方式になり多少コンパイルが高速化されます。

gulp実行時にエラー

Node.jsのバージョンとgulpfile.jsを修正し、いざgulpコマンドを実行して以下のようなメッセージが出力されgulpが動かない可能性があります。

		gulp sass
		(out)The `gulp' command exists in these Node versions:
		(out)12.17.0
	

この場合は、グローバルインストールしているgulpがうまく動いていないので、gulpをインストールし直すと改善する可能性があります。

		npm rm -g gulp # アンイストール
		npm i -g gulp # インストール

Sassの修正

既に記載しているSassを修正する場合は以下の修正が必要になります。

import宣言からuse宣言、forward宣言に変更

import宣言が廃止予定のため、use宣言、forward宣言に切り替える必要があります。useはimportと同様に呼び出し先を読み込む機能です。以下のようにstyle.scssから単純に他のファイルを読み込む場合に使用したりします。

		@use 'foundation/base';// 基本設定
		@use 'foundation/mixin';// ミックスイン
		@use 'foundation/function';// ファンクション
		...
		@use 'layout/header';// ヘッダー
		@use 'layout/footer';// フッター
		...
		@use 'object/component/inner'; // インナー
		@use 'object/component/page'; // ページ
		...
		@use 'object/project/top'; // トップページ
		@use 'object/project/contact'; // お問い合わせ

基本設定で宣言している変数を別のscssにて使用したいケースがあると思います。import宣言の場合だと、基本設定で読み込んだ変数が他のscssファイルに共有されますが、useだとそうではありません。例えば、トップページで基本設定の宣言を使用したい場合は、useで読み込む必要があります。また変数はそのまま使えるのではなく、ファイル名.変数名の形での記載が必要です。

		@use 'foundation/base';// 基本設定
		.class {
			color: base.$main-color;
		}
	

また、use宣言にはasをつけて別名にすることもできます。

		@use 'foundation/base' as b;// 基本設定（省略してb）
		.class {
			color: b.$main-color;
		}
	

ミックスインやファンクションについても別ファイルで使用する場合は個別にuseする必要があります。

		@use 'foundation/base' as base;// 基本設定
		@use 'foundation/mixin' as mixin;// ミックスイン
		@use 'foundation/function' as func;// ファンクション
		.class {
			@include mixin.mq(sp) {
				color: b.$main-color;
				width: func.calc(100,1);
			}
		}

毎回複数のuse宣言とさらに変数の前にファイル名（別名）を指定する必要があり、これだとかなり開発効率が落ちますよね。回避策としては、forwardを使用します。forwardを使うことで呼び出し先の変数を1つのファイルにまとめることができます。具体的な用途を交えながら説明します。

global.scssに基本設定、ミックスイン、ファンクションをforward宣言

		@forward 'foundation/base';// 基本設定
		@forward 'foundation/mixin';// ミックスイン
		@forward 'foundation/function';// ファンクション

トップページのscssファイルなどで、global.scssを読み込み

		@use 'foundation/global';// グローバル
		.class {
			@include global.mq(sp) {
				color: global.$main-color;
				width: global.calc(100,1);
			}
		}

上記のように運用することで、各ファイルでの共通変数の読み込みが1ファイルで済むのと、変数もglobal 1つだけで良くなります。基本設定、ミックスイン、ファンクションなどそれぞれでファイルを分けている場合には必須かと思います。

ファイル構成は以下のようになります。

style.scss 
|- Foundation - 各種設定値など
   |- _base.scss 基本設定
   |- _function.scss ファンション
   |- _mixin.scss ミックスイン
   |- _placeholder.scss
   |- _initialize.scss
   |- _global.scss グローバル（基本設定、ミックスイン、ファンクションをforward）

|- Layout - 全体レイアウトに関わる箇所（ヘッダー、フッター、サイドメニューなど）
   |- _header.scss
   |- _footer.scss
   |- _sidemenu.scss

|- Object - 以下サブフォルダを包含

   |- Component
      |- _button.scss
      |- _calender.scss
      |- _inner.scss
      |- _title.scss
      ...

   |- Project
      |- _top.scss トップ（_global.scssをuseして共通変数を使用）
      |- _company.scss
      |- _contact.scss
      ...

   |- Utility
      |- _font.scss
      |- _margin.scss
      ...

FLOCSSに準拠した構成にしているので、こちらの記事も見てみてください！

割り算の書き方を変更

	.class {
		width: 100%/3;
	}

のような割り算の記載が廃止となり、div関数に引数を渡す記載に変更

	@use "sass:math";
	.class {
		width: math.div(100%,3);
	}

スニペット変更

変数を使用する場合、ファイル名（別名）.変数名 とする必要があるためVScodeなどのスニペットは変更しておきましょう！

コンパイル高速化

コンパイルの高速化にはfibersというライブラリを使用しましょう！数秒から長いときで数十秒かかるコンパイルがミリ秒単位まで改善します。使い方は、fibersをインストールしてgulp-sassのプションに指定します。

		const fibers = require("fibers")
		const options = {
			fiber: fibers,// fibersを指定
			outputStyle: 'expanded'
		}; 
		// gulpのパイプにてfibersのオプションを指定
		.pipe(sass.sync(options))

その他

ソースコード公開

私が作成したテンプレートのgulpfile.jpの設定内容です。Sass以外にも画像圧縮などのライブラリも使用しているので是非見てください。
github

Node.jsのバージョン管理

様々な開発をしていくとNode.jsのバージョンが複数必要な場合がありますよ。nodenv を使用すると、ディレクトリごとにNode.jsのバージョンを切り替えることが可能なのでおすすめします。

Dart Sass化以外にもFLOCSSや制作実績も公開しているので是非読んでみてください！