Angular 19 にしたら、色が思ったように指定できなくなってちょっと手こずったので対応方法を紹介します。
はじめに
私の場合、Angular 19 に移行すると、下記のような警告が出るようになりました。
|
1 2 3 4 5 6 |
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 The plugin "angular-sass" was triggered by this import angular:styles/global:styles:1:8: 1 │ @import 'src/styles.scss'; ╵ ~~~~~~~~~~~~~~~~~ |
対応方法としは、@import を @use に変えるだけで大丈夫そうだったのですが、それだけではうまくいきませんでした。
問題
問題になったのは次のような記述です。
|
1 2 3 4 5 6 |
$theme-colors: ( "primary": #28a745, ); @import "bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap-icons/font/bootstrap-icons"; |
これを素直に、下記のように書き換えました。
|
1 2 3 4 5 6 |
$theme-colors: ( "primary": #28a745, ); @use "bootstrap/scss/bootstrap"; @use "../node_modules/bootstrap-icons/font/bootstrap-icons"; |
これで問題は出なくなったのですが、primary の上書き指定が反映されなくなってしまいました。
対応方法
正しい、修正情報は下記になります。
|
1 2 3 4 5 6 |
@use "bootstrap/scss/bootstrap" with ( $theme-colors: ( "primary": #28a745, ), ); @use "../node_modules/bootstrap-icons/font/bootstrap-icons"; |
わかってしまえば、こちらの方が意図がわかりやすい記法で納得感あるんですが、最初単にキーワードが変わっただけだと思ったので、それがわかるまではちょっと手こずりました。
参考文献
- Breaking Change: @import and global built-in functions
- 今回やりたかったことが、Configured Themesで紹介されています。
コメント