1 0

まだまだ @import は使えるのですが、今後は廃止されますから
そろそろ @use や @forward に慣れておきたいなぁーと
考えているユーザーさんも多いのではないでしょうか!?

ということで、bootstrap大好き人間な私はbootstrapを@useに変更してみることにしました。

まず前提ですが、@use / @forward が使える環境を整えてくださいね!
これ、Dart Sass というんですけど、
これまでの Node Sass から Dart Sass へ移行します。
検索するとアレコレ情報が出てますので、Dart Sass移行準備をしましょう!

なお、私の場合はGulpでコンパイルしておりますので
gulp.js のほうにdart sass の記述を追加しました。

以下は参考サイトです。
https://designsupply-web.com/media/knowledgeside/6503/
Gulpで使っているSassをNode SassからDart Sassへ移行してみる

bootstrap5 は、ソースファイルをダウンロードします。

https://getbootstrap.com/docs/5.0/getting-started/download/#source-files

ここで、bootstrap.scss に書いてある@importを一気に@useに変えてしまうと大変なことになります。
エラー出まくりで何が何やら分からなくなりますので💦
ここは焦らずに、ひとつひとつ、@importを@useに書き換えていって
ひとつずつエラーをクリアしながら進めていくと上手くいきます。

bootstrap.scss 内の@importを上から順に@useにしていく

_functions

上記画像は、_functions以外は全てコメントアウトし、@import “functions”を@useに書き換えています。
これでコンパイルしてみます。

まだ大丈夫ですね😊

次に進みましょう~。

_variables

variables ですね。bootstrapの変数ファイルです。
これでコンパイルします。

見事にエラー!が出ますね(笑)

これは、_variables 320行目に、@include が書いてあるけど、該当するミックスインがありませんよ!
と怒られています。

ちなみに、_variables 内に書かれてある@includeは、320、321、338行目の3か所です。


じゃあ、_assert-ascending や _assert-starts-at-zero のミックスインはどこにあるんだ?
ということで検索してみます(笑)

_functions.scss の中にありました。

bootstrap.scss 内にて、
@use “functions”
@use “variables”
と一緒に読み込んでも、
_functions内のミックスインは_variables側から認識されていないということですね。

@use の特徴なんですが、これまでは@import ~と書いておけば
他のファイルでも適用されていたものが、@use ではそうはいかなくなります。
_containerしかり、_gridしかり・・・
それぞれのファイルにて、必要なミックスインや変数を読み込むようにします。

そしたらば・・・
 
_variables の内容はほとんどが変数であることを考慮して、
320、321、338行目の@include の行をコメントアウトし、_functions.scss の一番最後に追加します。
(ようは、記述先の移動ですねw)

_variable 320、321、338行目の@include の行をコメントアウト

_functions の一番最後に追加

これだけでは、変数が無い!とエラーが出ますので、
_functions のほうには、先頭付近に以下を追加。

@use “variables” as *;

これでエラーは無くなったんではないかと思います😊

_functionsと_variablesはOK!でしょうか。

_grid

だいたい察しが付くと思うのですが(笑)
例えば_grid.scssの場合。

bootstrap.scss @use “grid” にする。

_grid.scss に追記。
@use “variables” as *;
@use “mixins/grid” as *;

これだけではまだエラーです。

さらに、mixins/_grid.scss 内に、以下の記述をします。

mixins/_grid.scss に追記。
@use “../variables” as *;
@use “../mixins/breakpoints” as *;

ちょっと面倒ですが💦
@use のメリットとしては、
どのファイルがどのファイルに依存しているのか?
というのがとても分かりやすくなる、という点でしょうか。

基本的には、こんな感じで
ここまで出来ると他のファイルも同様にやっていけると思います。

今回は@forward の使い方まで言及しませんが、次の機会にでも。


また、ここでは「as *」を使っていますが、名前空間のメンバー名(※変数やMixins、関数)が重複しないことを前提にしています。
重複があるとエラーが出ます。

とりあえず、bootstrap5でも、@useに書き換えることは可能!ということで😊

続きはまた後日にでも。

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %