開発

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");