dart-sassの@importの記載を@use, @forwordに置き換えをした時に行ったこと
以下の記事で stylus → dart-sassに変更はしたが、dart-sassに変更したにあたって、@importの記載を@use,@forwordに変更をしたため、その時に行なったことを紹介します。
importの廃止についての記事
参考にした記事
対応したこと
0. 全体的に変換した方法について
- 全体的なscssの読み込みは
@use
以下の記事の引用部分を参考
変数や関数といったメンバーのファイルの読み込みをルートのファイルから外し、@importを@useに変更します。
foundation/_index.scssのようなファイルは@forwardを使用する
以下記事の引用部分を参考
これで@use "foundation"と記述すればsanitizeとbaseが読み込めます。foundationに入れるファイルはそこまで増えないと思うので、いらないかなぁと思いつつ、すっきりするしわかりやすいと思ったので_index.scssにまとめてみました。
- 変数を読み込むファイルを追加したい場合には、名前空間の都合上
@useを使用
1. ファイルの全体を@importから@useに変更
- 変更前
// @import './foundation/debug'; @import './foundation/variables/*'; @import './foundation/mixins/*'; @import './foundation/reset'; @import './foundation/default'; @import './foundation/barba/*'; @import './layout/*'; @import './object/components/*'; @import './object/project/*'; @import './object/utility/*';
- 変更後
// @use './foundation/debug'; @use './foundation/reset'; @use './foundation/default'; @use './foundation/barba/animation'; @use './layout'; @use './object';
2. node-sass-glob-importerが使えないので、各ディレクトリに _index.scssファイルを作成して、そこにディレクトリ内にあるファイルの読み込みを行う。
node-sass-glob-importerのパッケージが@importをいい感じにしてくれるパッケージのため、そのパッケージを今回の対応では使用することができないため暫定的な対応として、foundation/_index.scssのようなイメージで各ディレクトリのファイルを読み込むためのscssファイルを作成。
3. 各種ファイルで変数が使えるように設定
mixin, 変数のscssファイルも以下のようなイメージで1つのscssファイルを読み込むようにすることでscssファイルの変数の扱い方を簡単にしました。
- mixinの設定ファイル
@forward 'mediaquery'; @forward 'MixinFontSize'; @forward 'MixinHoverAction'; @forward 'MixinWrapperWidth';
- 変数の設定ファイル
@forward 'breakpoint'; @forward 'color'; @forward 'font'; @forward 'zindex';
- 上記2つをまとめたもの
@forward 'variables'; @forward 'mixins';
- コンポーネント部分での使用イメージ
@use "../../foundation/" as global;
.c-text {
@include global.MixinFontSize(15);
}
4. mixinの中でscssの変数を使用しているものについては個別にvariableなどを宣言
mixin内で変数も使用しているものもあり、3と同じような方法で読み込みを行うと同じファイルがimportしてしてしまうため、その部分のみは個別で変数のファイルを切り出して呼ぶ。
例としては以下のようなパターンになります。
@use "../../foundation/variables" as variable; // ここはvariablesのファイル
@mixin max-pc() {
@media screen and (min-width: variable.MixinBreakPoint('MAXPC')) {
@content;
}
}
最後に
個人で行った時のPR・対応コミットは以下になります。
PR
対応前のcssと対応後のcssの結果についても以下に記載しております。
