bootstrapのテーマカラーを削減する方法
作成日：
2018年12月21日
📝 はじめに
本記事はBootstrapのCSS容量削減についての一考です。
bootstrapは多くの便利なスタイルが格納されているフレームワークですが、一方で使用しないスタイルも多く、容量が大きいのが難点です。
例えばテーマカラーだけでも、
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
White
と9パターンあり、これらの値を元に文字色や背景色のスタイルが生成されることになっています。
しかし、Webアプリケーションを作るのでなければここまでのカラーパターンは不要ですので、テーマカラーを厳選することでbootstrapの容量を削減することが出来ます。
そのために、bootstrapの_variables.scssの配列を調整するのですが、安易に
SASS _variables.scss
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
//"light": $light,
//"dark": $dark,
//"black": $black,
),
$theme-colors
);と、コメントアウトしてもSCSSのコンパイルエラーが発生しますので、
SASS _variables.scss
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"black": $black,
),
$theme-colors
);
$theme-colors: map-remove($theme-colors, "light", "dark", "black");と1行足してあげます。
Theming Bootstrap
https://getbootstrap.com/docs/4.0/getting-started/theming/#remove-from-map
色を削除するには$theme-colors、次のようにしますmap-remove。
これで 10kb程度削減 出来ました。
物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
関連投稿
コメントをどうぞ
- メールアドレスが公開されることはありません。
- コメント欄にURLは入力できません。
- このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
コメント
2018年12月22日 11:08 AM