【gulp】Dart Sassへの乗り換え方法

@importが2022年に廃止予定と聞いたのでDart Sassに乗り換えた時の備忘録

Dart Sassへの乗り換えるに至った経緯

@importが2022年に廃止予定で@useに乗り換える必要性があるのとそれを使うためにはDart Sassを使う必要性があるという記事を見たため

理由としては詳しく知らないけどCSSの@importと被ってるとか書かれてた

// ↓変数とかまとめてるファイル(Sassの@import)
@import "_mixin.scss";
// ↓外部ファイル読み込む時とかに使う(CSSの@import)
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body  {
  font-family: 'Noto Sans JP', sans-serif;
}

こんな感じでどっちがどっちだかわからなくなる

なので、せっかくだし乗り換えちゃおっと思ったらうまく行かなかったので備忘録として残した

乗り換え方法と書き方

乗り換え方法は簡単でgulpfile.jsの以下の記述の下に一文追加するだけ
他の部分は変えなくても行けるみたい

let sass = require("gulp-sass");
// ↓追加(Dart Sass)を使う記述
sass.compiler = require('sass');

ただ、この記述方法だけだと
「Error: Cannot find module ‘sass’」といったエラーが発生した
あと、scssファイル書き換えてたら「This at-rule is not allowed here. @use」っていうエラーも出た
package.jsonを確認すると「gulp-sass」はあるけど「sass」は無く、どうにも「sass」を別途インストールする必要性があったので以下のコマンドをコマンドプロンプトでpackage.jsonのあるディレクトリに行き打つ

npm install --save-dev sass

これでpackage.jsonに「sass」が追加され、Dart Sassが使えるようになる

@useの使い方

で、@importから@useへの書き換えなんだけど上手く行った例だけ載せとく

// ↓書き換え前
@import "_mixin.scss";
body  {
  color:$base-color;
  font-size: 1.3rem;
  @include pc{
      font-size:1.4rem;
  }
}
//　↓書き換え後(Dart Sass)
@use "mixin";
body  {
  color:mixin.$base-color;
  font-size: 1.3rem;
  @include mixin.pc{
    font-size:1.4rem;
  }
}

Dart Sassから「名前空間」という名前を分割して衝突の可能性を減らす概念が導入されたみたい
なので「変数」や@includeで呼び出すような「mixin」もファイル名を入れて「.(ドット)」で繋ぐ必要性があるみたい
読み込むファイルをpartial(パーシャル)って言ってパーシャル名.変数ormixinで指定するみたい

また、"mixin" as ○○とすることで省略して書くこともできる

@use "mixin" as m;
body  {
  color:m.$base-color;
  font-size: 1.3rem;
  @include m.pc{
    font-size:1.4rem;
  }
}

名前空間を取り入れることで、名前の衝突を防ぐ目的とかがあるみたいね

おまけ：個人的な備忘録

SassにはDart SassとLibSassというのがあって今まで使っていたのがLibSass(node-sass)を使ってたっぽい
「gulp-sass」しか使ってなかったからよくわからなかった…

今後LibSassに@useが搭載されないわけではなさそうだけど一つファイル追加するくらいの手間なのでDart Sassを使ったほうがいいのかもね