遅ればせながら、node-sass（LibSass）からDartSassへの変更を行いました。
その時対応した内容を備忘録として、記載します。
作業に入る前に
今回は、Gulp（gulp-sass）での変更方法について書いてきます。
（私が携わっているサービスがGulpを使っているので…）
手順
- 必要なnpmパッケージをインストールする
- Gulpファイルを書き換える
-
@importを@useや@forwardに置き換える
1. 必要なnpmパッケージをインストールする
gulp-sassでDartSassのコンパイルをするのに必要な、npmパッケージ（sassとfibers）をインストールします。
npm i -D sass fibers
2. Gulpファイルを書き換える
書き換える箇所は、以下3箇所です。
var sass = require('gulp-sass');- fibersプラグインを読み込む記述を追加する
- Sassのコンパイルのタスクオプションにfibersを追加する
以下、該当の部分の抜粋です。
gulpfile.js（書き換え前）
const sass = require('gulp-sass');
const options = {
outputStyle: 'expanded',
sourceComments: false
};
gulpfile.js（書き換え後）
const sass = require('gulp-sass')(require('sass'));
const fiber = require('fibers');
const options = {
fiber: fiber,
outputStyle: 'expanded',
sourceComments: false
};
3. @importを@useや@forwardに置き換える
3-1. 変数や@mixinのファイルを書き換え
今まではFLOCCSをベースに、メインとなるstyle.scssに、@importを使ってすべてのモジュールを読み込んでいましたが、@useや@forwardを使い分けて設定行く必要があります。
まずは以下手順で共通部分を書き換えます。
-
global/を作成する - 変数や
@mixinのファイルをglobal/に移す -
global.scssを作成し、global/フォルダのファイルを@forwardで読み込む - 他のまとめ用のファイル（
foundation.scssやlayout.scssなど）も同様に、@importから@forwardに書き換える
書き換え後は、こんな感じになります。
書き換え後のディレクトリ構成
common/
│
├── foundation/
│ ├── _reset.scss
│ └── _typography.scss
│
├── global/
│ ├── _mixins.scss
│ └── _variables.scss
│
├── layout/
│ └── _l-body.scss
│
├── object/
│ │
│ ├── component/
│ │ └── _c-button.scss
│ │
│ └── project/
│ └── _p-campaign.scss
│
├── foundation.scss //まとめ用ファイル
├── global.scss //まとめ用ファイル
├── layout.scss //まとめ用ファイル
├── component.scss //まとめ用ファイル
├── project.scss //まとめ用ファイル
└── style.scss
global.scss
@forward "global/variables";
@forward "global/mixins";
3-2. 残りのファイルを置き換える
置換えを手作業で行っても良いのですが、大変なのでsass-migratorを使って書き換えていきます。
まずは、sass-migratorをインストールします。
npm i -D sass-migrator
インストールが終わったら、以下コマンドを実行していきます。
npx sass-migrator module --verbose --migrate-deps ［ファイル名］
実行すると、@importから@useに自動で変更されました。
指定したファイルの関連ファイルも一緒に変更してくれますので、ファイル名の指定でOKです。
以上です。
最後までお読みいただき、ありがとうございました。