【gulp版】node-sass（Libsass）からdart-sassにする

はじめに

業務でやったので。
gulp版のsassを、node-sass（Libsass）からdart-sassに変更する手順の覚え書き。ほぼ自分用です

確認方法

まずはsassのコンパイルに何を使っているか確認してみる。

$ cd {ProjectDirectory}/

$ npm list --depth=0 | grep sass | cut -f 1 -d "@"

▼gulpの入っているリポジトリでは最初からこれらが入っていました。

├── gulp-sass
├── gulp-sass-inheritance

参考：Sassのコンパイルに何を使っているかターミナルから知る方法

アンインストール&インストール

gulp-sassをアンインストールし、
gulp-dart-sassをインストールします。

$ cd {ProjectDirectory}/

// アンインストール
$ npm uninstall gulp-sass

// インストール
$ npm install gulp-dart-sass --save-dev

（nodeやらnpmのバージョンで警告が色々でてきましたがとりあえずスルーで進めます…）

参考：さようならLibSass、こんにちはDart Sass。

---

▼再び確認すると下記のようになります。

├── gulp-dart-sass
├── gulp-sass-inheritance

compassも不要なのでアンインストールしました

$ npm uninstall compass-importer

compassを廃止した理由

• （当時のプロジェクトの場合）@includeでベンダープレフィックスつけるのに使っているだけのため
  • 昔は必要だったけど、今はベンダープレフィックスいらないものがほとんどのため
    • 該当の@includeの記述は修正する
• compassのSVGのサポート（$experimental-support-for-svg: true;）の記述もあったがIE9用のため削除した

参考：Compass の送別会

gulpfile.jsの中を変更する

        .pipe(plugins.sass({
            includePaths: [cfg.path.scss],
            importer: plugins.compassImporter,
            outputStyle: 'expanded'
        }))
~
        // エラー部分
        .on('error', plugins.sass.logError)

↑このへんのplugins.sassを

        .pipe(plugins.dartSass({
            includePaths: [cfg.path.scss],
            importer: plugins.compassImporter,
            outputStyle: 'expanded'
        }))
~
        // エラー部分
        .on('error', plugins.dartSass.logError)

↑plugins.dartSassに書き換えます。
（sassInheritanceとか別のもあるので全置換しないように注意）

既存の node_modulesフォルダを消し、npm installします。

これでgulpの準備は完了です。

@importを@useと@forwardに書き換える

いつもどおりにgulpする。

gulpするとscssファイルにDeprecation Warningエラーがいっぱい出るので修正します。
上記の通りcompassも廃止したので関連の記述を消していきます。

参考：node-sassからDartSassへsassコンパイラの移行
参考：【Sass】@importの廃止に伴い@useと@forwardに書き換える

baseフォルダのファイルをまとめる（当時のプロジェクトの場合）

baseフォルダの直下に_index.scssファイルを新規作成、下記のようにする

@forward "setting";
@forward "reset";
@forward "mixin";
@forward "base";

scssファイルごとに下記のように記述してある部分があったため、書き換えた。

@import "base/setting";
@import "base/reset.scss";
@import "base/mixin.scss";
@import "base/base.scss";

↓

@use "base" as b;

これで、baseフォルダにあるSCSSで設定している変数（$〜）、mixin（@include）などの頭にb.をつけると呼び出すことができる。

コマンドライン上でエラーが出ない・表示に問題なければOKです。