- 1. 概要
- 2. 警告
- 3. 対処
- 4. 現行
- 5. 参考サイト
1. 概要
2025年8月1日、それまで、なにも問題がなかった「.scss」ファイルから「Warning」が出力されるようになりました。
2. 警告
こんな「Warning」が出力されます。
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
╷
4 |@import "font";
| ^......^
╵
file:///d:/101-sing.ne.jp/www/css/freebsd-sc.scss:4:8
THIS IS DEPRECATED AND WILL BE REMOVED IN SASS 2.0
「Google」大先生に訳してもらいますと。
Sass @import ルールは非推奨であり、Dart Sass 3.0.0 で削除されます。
詳細情報と自動移行ツール: https://sass-lang.com/d/import
╷
4 |@import "font";
| ^......^
╵
file:///d:/101-sing.ne.jp/www/css/freebsd-sc.scss:4:8
これは非推奨であり、SASS 2.0 で削除されます。
だそうであります。
3. 対処
「ChatGPT」軍曹に尋ねると。
@import は
・CSS の @import と名前が同じで混乱しやすい
・読み込み順や変数の上書きルールがあいまい
・依存関係が複雑になりやすい
という理由から、Sass チームが より明確で安全な方法 として @use / @forward を導入しました。
ちゅうことだそうで。
「@use」の方が、短いので、「@use」に変えようかしら。
ただし、これだけではだめで・・・、名前空間ちゅうのをつける必要があるようです。
@use はデフォルトでモジュールの名前空間を付けます。
例えば variables.scss の $primary-color を使うときは variables.$primary-color のように書きます。
名前空間なしで使いたい場合は as * を付けます。
@use "variables" as *; // これで従来通り $primary-color とだけ書ける
ということで、「@use "variables" as *;」という書き方をすればいいようです。
4. 現行
ということで、2026年6月5日の現在の書き方として、わたしの場合。
_font.scss
というファイルを用意して、中に。
@font-face {
font-family: "Noto Sans Mono CJK JP";
...
}
てなことを書いております。
本体の「.scss」の方を。
@charset "UTF-8";
@use "font" as *;
という書き出しにしております。
5. 参考サイト
本ページは、「ChatGPT」軍曹および「Google」大先生を参考にさせていただきました。
|
|
