eureka

LibSassからDartSassにsass-migratorで一括移行する!

1

そろそろDartSassに移行しないとダメ〜?ファイル数多くてめんどくさいんだよね

簡単に移行する方法があるぞ?

楽したい!楽したい!

おはこんばんにちは、しょうみゆです。
今日はみんなが大好きなSassのお話です。

node.jsで使用しているnode-sass(LibSass)が2020年に非推奨になり、『Dart Sassに移行しなければ』という声も多く聞こえてくるようになりました。

ただし、移行するといっても@importから@useに置換すればいいという単純なものではなく、既存のプロジェクトをメンテナンスするとなると結構めんどくさいんですよね。

ところがどっこい、諦めることなかれ!
一括で自動的に移行してくれる便利でスーパーインテリジェンスなパッケージを見つけたので紹介しようと思います。

それがsass-migratorです!
まずは試しに実装してみましょう。

DartSassで出来る内容や移行する内容などは下記の記事で詳しく説明されているので割愛します。
外部の記事ですが、よかったら覗いてみてください。
[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する

環境

node v16.4.2
yarn 1.22.4

sassをインストールする

まずはsassをインストールします。
node-sasssassがありますが、今回はDartSassを使用するのでsassの方をインストールします。

$ yarn add -D sass

LibSass記法でファイルを用意する

今回は一括移行という内容なのでLibSassで書いたSassを用意します。
Sassファイルのパスはご自身のプロジェクトに合わせて変更してください。

今回は試しに3つ用意します。

@import "./modules/variables";
@import "./modules/base";
// color
$color-black: #1c1c1c;
$color-white: #fff;
$color-off-white: #fafafa;

// background
$color-body-background: $color-off-white;

// font-size
$font-size-base: 1rem;

// text
$base-text-color: $color-black;
$sub-text-color: $color-white;
$base-font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka",
  "メイリオ", "Meiryo", "MS Pゴシック", "MS P Gothic", sans-serif;
html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  height: 100%;
  font-family: $base-font-family;
  font-style: normal;
  font-weight: 400;
  font-size: $font-size-base;
  line-height: 1.5;
  color: $base-text-color;
  letter-spacing: 0.05em;
  background-color: $color-body-background;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
strong {
  font-weight: bold;
}

input,
textarea {
  max-width: 100%;
  font-family: inherit;
  font-size: 100%;
}

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

今回の主役のsass-migratorをインストールしましょう。

$ yarn add -D sass-migrator

LibSassからDartSassに一括移行する!

準備は全て整ったのでいよいよ移行しましょう!
関連しているファイルも全て変更してくれるので、main.scssだけ指定すればOKです。

$ yarn sass-migrator --migrate-deps module ./assets/scss/main.scss
✨  Done in 0.98s.

LibSassで作成したファイルを見てみましょう。
同じように作成していればmain.scss_base.scssの内容に変化があるはずです。

まずmain.scss@importルールから@useルールに自動で変更されました。

@use "./modules/variables";
@use "./modules/base";

_base.scss_variables.scssで定義している変数を使用しているので、_variables.scssを読み込み、変数名に名前空間を自動で付けてくれました。

@use "variables";

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  height: 100%;
  font-family: variables.$base-font-family;
  font-style: normal;
  font-weight: 400;
  font-size: variables.$font-size-base;
  line-height: 1.5;
  color: variables.$base-text-color;
  letter-spacing: 0.05em;
  background-color: variables.$color-body-background;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
strong {
  font-weight: bold;
}

input,
textarea {
  max-width: 100%;
  font-family: inherit;
  font-size: 100%;
}

今回はSassのファイル数が少ないのであまり実感がわかないかもしれませんが、10、20くらいのファイル数になってくると、とても恩恵を感じるのではないでしょうか。これはとっても便利〜〜!

Sass Migratorについて

sass-migratorは公式で詳しく説明されています。英語ですが😇
Migrator – Sass

コマンドラインで指定できるsass-migratorのオプション

--migrate-deps

コマンドラインで直接指定したファイルだけではなく、@useルール、@forwardルール、@importルールを使って依存しているスタイルシートも変更します。

--dry-run

このオプションをつけて実行するとファイル自体に変更は起こりません。通常は--verboseオプションと組み合わせて、どのファイルに変更があるのかを確認するのに使用することができます。

一度マイグレーションの実行をしてしまうと戻すのも大変なので、事前に確認しなければならない、慎重にならないといけないなどの場面で使えるかと思います。

$ yarn sass-migrator --dry-run --verbose module ./assets/scss/main.scss
Dry run. Logging migrated files instead of overwriting...

<===> assets/scss/main.scss
@use "./modules/functions";
@use "./modules/variables";
@use "./modules/mixins";
@use "./modules/reset";
@use "./modules/base";

✨  Done in 0.41s.

--verbose

このオプションを指定するとコンソール(ターミナル)に変更があったファイル名を表示します。

$ yarn sass-migrator --verbose module ./assets/scss/main.scss
Migrating assets/scss/main.scss
✨  Done in 0.65s.

他にも2つ紹介されていましたが、あまり使わなそうだったので割愛します。
興味があれば公式を覗いてみてください。

Migrator #Global Options – Sass

最後に

sass-migratorがまだあまり知られていないのか、記事は少なめなので公式を見て頑張ることになりそうです。

一度移行すると、@importとかは再度実行すれば@useにまた変更されましたが、変数についてる名前空間をとって再実行しても変更されませんでした。

こちらは一回のみで移行したら終わりなのか、それともコマンドが悪いのか分かっていないので、何か分かったらまた更新しようと思います。

公式の冒頭にも下記のように書かれているので、なんだか出来そうな感じはしたのですが・・・うむむ

The Sass migrator automatically updates your Sass files to help you move on to the latest and greatest version of the language. Each of its commands migrates a single feature, to give you as much control as possible over what you update and when.

【訳】Sass migratorは、Sassファイルを自動的に更新し、Sass言語の最新かつ最高のバージョンに移行できるようにします。それぞれのコマンドは1つの機能を移行し、いつ、何を更新するかをできる限りコントロールできるようになっています。

Migrator – Sass

てことで、今回はDartSassへの一括移行の話でした!ひとつずつ移行するのがめんどくさかったり、大量のSassファイルがある場合など、ぜひ試してみてください。

1