Zenn
😩

【Sass】@importから@useに移行した顛末記

2022/07/06に公開
CSS
Sass
Scss
npm
frontend
tech

はじめに

2022年10月頃にはSassで@importが使えなくなるのに、やっと重い腰を上げて@useに移行しました😓
移行する中で引っかかったことや構成のアイデアを共有していこうと思います。

Episode 0：置き換えるだけじゃダメでした

それはそうだろう、という話ですが、
@importを@useに置き換えるだけではダメです笑

各ページでの読み込みや名前空間の指定が必要になるので、エラー吐きまくります！😭

Episode 1：逐一読み込ませてみる

変数用ファイルを逐一@useで読み込みが必要

ひとまず、style.scssの@importを@useに変更した後、
エラーで怒られた変数やmixinsの読み込みを解消します。

例：

style.scss
@use "../common/base";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";

例：

_base.scss
//変数を使うための読み込み
@use "../config/variables";
@use "../config/mixins";

body {
margin: 0;
}

名前空間の指示が必要

変数やmixinsを使用する場合は以下のようにして使用します。

例：

_base.scss
@include mixins.sp {
    @include mixins.fz(14);
}

基本的にはmixinsの変数使うで！といった宣言がいるんですねぇ...
（省略や独自の名前に指定することもできるので後述します）

厳密に管理できるのでプログラムとしては最適かもですが、運用上面倒臭いパターンも多いかもしれないです...

sassの構成の見直しが必要では？？

逐一読み込む方法で、ひとまず移行自体は出来ました。（エラー吐かずにコンパイルは通る）
が...この記述は規模が大きくなるとカオスになる予感しかしません笑

style.scss
@use "../common/base";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
@use "../hoge/hoge";
// と、どんどん増えていく！！！！

（node-sassの時はglobでまとめられたのに...）

それに、名前空間の指示もよほど大規模なCSS設計にならない場合は避けたい...

Episode 2：Sassの構成を見直す

てなわけで、諸々解決するためにSassの構成自体を見直すことにしました。

_index.scssで参照させる

フォルダ毎に_index.scssを作成し、フォルダ内のパーシャルはそこで読み込ませるとstyle.scssは簡略化できます。

scss/
   |
   |- common/
   |   |- _base.scss
   |   |- _btn.scss
   |   |- _index.scss （ここで読み込ませる）
   |
   |- style.scss
style.scss
@use "common";
@use "hoge";

フォルダ名で@useすると_index.scssを参照するようです。
つまりフォルダ毎の@useをそれぞれフォルダ内の_index.scssでまとめ、各フォルダの読み込みはstyle.scssで行う形になります。
だいぶスッキリしました。

変数は@forwardで

他のファイルから参照される変数やmixinsは、@forwardを使って読み込む必要があります。
従って、_mixins.scssや_variables.scssを含むフォルダでは読み込みを@forwardに変更しました。

_index.scss
@forward "mixins"; //mixinの読み込み
@forward "variables"; //フォント等変数の読み込み

アスタリスクで名前空間は省略！

そして、上記の変数やmixinsを読み込むときですが、
序盤に名前空間の宣言が必要と言いました。
運用によりますが、ここは省略できます！！！！！！！！！

特に指定しない場合：

_base.scss
@use "../config/mixins";

@include mixins.sp {
    max-width: 100%;
    height: auto;
}

省略したい場合：

_base.scss
@use "../config" as *;

@include sp {
    max-width: 100%;
    height: auto;
}

まとめ

  • 各フォルダに_index.scssを配置
  • style.scssで各フォルダを一括読み込み
  • アスタリスクで、変数を呼び出すときの記法を省略

ポイントとしては、この3点でスムーズに移行できるかと思います！

おまけ

実は一つだけ@importが残ってるものがあります。（終わってないやんけ！）
それはフォント等CDNの読み込みです...

style.scss
@use "common";
@use "hoge";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Roboto:wght@300;400;700&display=swap");

単純にheaderに移しても良いのですが、本番にCDNぶっ混むのはちょっと...。
ローカルで読み込んで確認してから本番に反映したいなぁ...
と、別の読み込み手法を考えてる最中です😓

ちなみに、共存させる場合は@useの後に記述すれば一応共存できます。
@useの下部に書いているのですが、読み込みは@importが最初に行われるみたいです（なんか気持ち悪いね笑）

Discussion