gulp-sassをgulp-dart-sassへ変更する【プロジェクトをUpdateしてく！-➄】

今回行った一連の流れ

➀nodistをvoltaへ変更
➁npm-check-updatesを導入
➂gulp-sassをgulp-dart-sassへ変更　←今回ここをpick up☆
➃bootstrapを使用したプロジェクトの場合、bootstrapのアップデート

経緯

新しいプロジェクトを任されることに。そのプロジェクトをクローンしたらnpx update-browserslist-db@latestのコマンドがnpx gulpで常にでてきてしまうことに気づき、さらに元々プロジェクトを担当していた人と開発環境が違ったためgulpファイルの追記と修正が必要になった。

以上のことから、「一連の流れ」を行うことになった。
上記の項目ごとに備忘録として記事を書くことにした。

前提

• windows
• nodistをパッケージマネージャーとして使用
• bootstrapバージョン4を使用
  　
  　　
  　
  　
  　

【gulp-sassをgulp-dart-sassへ変更】

※この記事は続き記事です。
　項目ごとに記事わけしているので単体でも活用していただけます。

《目次》

• gulp.jsの記述追加と変更
• gulp-dart-sassをインストール
• gulp-sassをgulp-dart-sassで起こる変更によるエラー
  　
  　
  　
  　

＜gulp.jsの記述追加と変更＞

パッケージを読み込み部分にgulp-dart-sassを追加

gulp.js

//～省略～
const sass            = require("gulp-sass");//今まで使用してたsass
const dartSass       = require("gulp-dart-sass");//追加

sassの記述をdartSassに入れ替える

以下の中にsassが使われている部分を見つける
※gulpファイルは開発環境で結構個人で違ってくるので大きな範囲で全く同じ記述というのはなく参考になるコードわからないですが。。。

gulp.js

//sassをコンパイルしている部分
const compileSass = callbackfn => {
  gulp.on("start", () => console.log("Start Compiling Scss..."))
    .src(paths.scssFile, { since: gulp.lastRun(compileSass) })
    .pipe(progeny({
      multipass: [
        /@import[^;:]+;/g,
        /\s*['"][^'"]+['"]\s*,?/g,
        /(?:['"])([^'"]+)/
      ]
    }))
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
    .pipe(sass({ outputStyle: 'expanded' }))  //ここにsassが使用されてる
    .pipe(postcss([ autoprefixer(), cssMqpacker() ]))
    .pipe(cleanCss({ compatibility: { properties: { backgroundSizeMerging: false } }, format: "beautify", level: { 2: { restructureRules: true, mergeSemantically: true, } } }))
    .pipe(gulp.dest(paths.cssDir))
    .on("end", () => {
      console.log("Finish Compiling Scss...!");
      callbackfn();
    });
};

書き換えをする

gulp.js

//書き換え前
 .pipe(sass({ outputStyle: 'expanded' }))  //ここにsassが使用されてる

//書き換え後
 .pipe(dartSass({ outputStyle: 'expanded' }))

　
　
　

＜gulp-dart-sassをインストール＞

ターミナル

npm i -D gulp-dart-sass

　
　
　

＜gulp-sassをgulp-dart-sassで起こる変更によるエラー＞

gulp-sassからgulp-dart-sassに変更するということはnode-sassからdart-sassになるということなのですが記述方法の変更があります。その部分にエラーが出るはずなのでgulp-dart-sassをインストールできたら確認していきましょう！

ターミナル

npx gulp

ガルプを回してエラーがたらnode-sassの書き方とdart-sassの書き方で変わった部分で変更になった記述が使用されたプロジェクトだということです。ここで今回筆者が当たったエラーをピックアップしておきます。

スラッシュを除算に使うのは非推奨

scss

//エラー
  margin-bottom: $spacer /2;

//dart-sass
  margin-bottom: math.div($spacer, 2);

math.div()で囲って/の所を「,」で分ける。
そして、このmath.div()を使用するとファイルの頭に@useをつけて欲しいというエラーもでる。

scss

@use "sass:math"

　※@charset "UTF-8"よりあと。
　
　
このエラーがほとんどでした。
ほかにも色々な変更があるので参考リンクをはっておきます。

エラーは基本的にnpx gulpをすればエラー箇所やファイルなぜエラーなのかをターミナルで見ることができます。なので、特定するのにすごく難しいということはないかと思います。
よく言われるのは@importが@useに変わるというところでしょうか。

npx gulpでエラーが出なくなったら完了です！

　
　
　

◆◆次回はbootstrapを使用したプロジェクトの場合、bootstrapのアップデート◆◆

次回

bootstrapのアップデート【プロジェクトをUpdateしてく！-➅】