sass dart-sassでbootstrapのprimaryの色を変える(@import, @use)
@importじゃなく@useを使ってbootstrapのprimaryの色を変更したい
作成日:2022-12-23, 更新日:2022-12-23
基本
dart-sassでは@importじゃなく@useを使えってことなんだけど、@importで出来たことをひと手間加えなくちゃいけない
@importでbootstrapのprimaryの色を変更
ひとまず「@import」のときの色変更
$primary: red; @import "bootstrap.scss";
@useでbootstrapのprimaryの色を変更
@use "bootstrap.scss" with( $primary: red, );
primaryとdangerと…複数の色を変更
@use "bootstrap.scss" with( $primary: red, $danger: blue, $info: green, );
色設定を別のファイルでする場合
▼「_setting.scss」 - 色設定をする別ファイル
$primary: red;
▼「layout.scss」 - コンパイルする対象のファイル
@use "setting" as *; // 名前空間は省略。省略したくなければ省略不要 @use "bootstrap.scss" with( $primary: $primary, // $primary: setting.$primary, // ←名前空間を省略していない場合 );