sass-migratorでnode-sassからdart-sassに移行する時メモ

前回はdart-sassに移行した、もしくは新しくsassを使う場合の
dart-sassの変更点などをメモしたました。

今回は既存のプロジェクトで既にnode-sassが使われており、
それをdart-sassに移行する時に便利な方法だと思います。
※コマンドはyarnで行っております。

既存のnode-sassを削除する

yarn remove node-sass

こちらで既存のnode-sassを削除できます。

dart-sassをインストールする

yarn add -D sass

ただのsassになっていますが、dart-sassのパッケージ名はsassのようです。

そしてsass-migratorをインストール

$ yarn add -D sass-migrator

sass-migratorが自動で移行してくれます。

今回は下記のような構成を準備しました。

root
style.scss
_base.scss
-- _mixin.scss
-- _valuse.scss

各ファイルの中身

_valuse.scss

$pc: 769px; // PC
$sp: 768px;  // スマホ

_mixin.scss

@import "../values/valuse";

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
  
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

_base.scss

@import "./values/valuse";
@import "./mixin/mixin";

body{
 font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
}

.pc {
  display: block;
  @include sp{
    display: none;
  }
}

.sp {
  display: none;
  @include sp{
    display: block;
  }
}

style.scss

@import "./base"

sass-migratorを実行

今回はディレクトリのルートにまとめているstyle.scssがあるので、
下記のように実行したいscssを指定します。

$ yarn sass-migrator --migrate-deps module style.scss

実行すると下記のように変更されました。

_mixin.scss

@use "../values/valuse";

@mixin pc {
  @media (min-width: (valuse.$pc)) {
    @content;
  }
}
  
@mixin sp {
  @media (max-width: (valuse.$sp)) {
    @content;
  }
}

_base.scss

@use "values/valuse";
@use "mixin/mixin";

body{
 font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
}

.pc {
  display: block;
  @include mixin.sp{
    display: none;
  }
}

.sp {
  display: none;
  @include mixin.sp{
    display: block;
  }
}

style.scss

@use "base";

@importが@useに変更されました。
また、読み込んだ変数やmixinにも名前空間がついて変更されています。

オプションについて

--migrate-depsをつけて実行していますが、
これをつけると指定したファイル、今回だとstyle.scssだけでなく、
@use、@forward、@importを使って依存しているファイルも変換くれるそうです。

他にもオプションが多数ありますが、自分は特に使わなかったので、
詳細は下記参考にいただければと思います。

以上、node-sassからdart-sassに移行する方法でした。
既存のプロジェクトなどではは、@importを使っているものがたくさんあると思うので、
なにかと重宝しそうです。