Sassの@import廃止対応しました

はじめに

このブログをbuildしたらSassでエラー出てました。

@import "./_content.scss";
        ^^^^^^^^^^^^^^^^^
app\css\index.scss 70:11  root stylesheet

DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import

どうやら、Dart Sass 3.0.0で廃止される@importや、グローバル組み込み関数が非推奨になるらしいのです。
下記サイトに沿ってマイグレしたので、備忘録とします。

Breaking Change: `@import` and global built-in functions

sass-lang.com

マイグレ対応

何をすれば良いのか

以下に対応する必要があります。

@importが非推奨
- @useや@forwardに置き換える必要がある
グローバルスコープ変数、関数が非推奨
- 変数はcolors.$my-variableのように名前空間を指定する必要がある
- 組み込みもmap.getのように名前空間を指定する必要があるなど

自動マイグレツールを実行してみる

ありがたいことにマイグレツールが用意されていたので実行してみました。

npm install -g sass-migrator
sass-migrator module --migrate-deps your-entrypoint.scss

残念ながらエラーになりました。
外部ファイルに設定されている外部変数にアクセス出来ないようです。

Error: This stylesheet was loaded by a nested import in index.scss. The module system only supports loading nested CSS using the load-css() mixin, which doesn't allow access to variables from the outer stylesheet.
   ╷
10 │   color: $c-text-link-primary;
   │          ^^^^^^^^^^^^^^^^^^^^
   ╵
  _content.scss 10:10  root stylesheet
Migration failed!

@importの書き換え

まずは@importを@useや@forwardに書き換えを実施しました。
文言自体はただ書き換えれば良いのですが、@useを使用するにあたって、別ファイルで定義された変数を使うためには@use: "variable"としたうえで名前空間.colorのように変数を使用する必要があります。
そうなると、index.scss（エントリポイント）で定義した変数を_content.scssで使用するような依存関係はNGでindex.scss←_content.scss←_variables.scssのような依存関係にする必要があります。

以下は今回のマイグレで実施した構成変更です。
変更前

@import "content";
@import "embed";
@import "highlight";

変更後

@use "content";
@use "embed";
@use "highlight";

変数やmixinの書き換え

グローバルでなくなったため、別ファイルで定義した変数やmixinを使用するには@useしたうえで名前空間を指定する必要があります。
変更前

// 変数
.embed-figma {
  border: 1px solid $c-border-gray;
}
// mixin
@include mq(sm) {
  padding: 1rem 0.8rem;
  font-size: 0.85em;
}

変更後

// variableをuse
@use "variables" as variables;
// 変数
.embed-figma {
  border: 1px solid variables.$c-border-gray;
}
// mixin
@include variables.mq(sm) {
  padding: 1rem 0.8rem;
  font-size: 0.85em;
}

ビルドイン関数の書き換え

ビルドイン関数も、@useで読み込んで使用する必要があります。
例えばmap-getは以下の通りです。

変更前

@media #{map-get($breakpoints, $size)} {
  @content;
}

変更後

@use "sass:map";

@media #{map.get($breakpoints, $size)} {
  @content;
}

その他のビルドイン関数についてはSassドキュメントを参照してください。

Built-In Modules