bootstrapのテーマカラーを削減する方法

作成日:
📝 はじめに 本記事は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行足してあげます。

favicon
Theming Bootstrap https://getbootstrap.com/docs/4.0/getting-started/theming/#remove-from-map

色を削除するには$theme-colors、次のようにしますmap-remove。

これで 10kb程度削減 出来ました。

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメント

bootstrapでカスタムカラー配列を作成して不要な多色コンポーネントを削除する方法 – モノグサにお灸 さん
[…] 参考 […]
2018年12月22日 11:08 AM 返信

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。