【簡単】bootstrapに新たな色を追加する方法

（最終更新月：2021年8月）

「Bootstrapの既存色を追加したい！」

という方へ向けた記事となります

公式ページで紹介されている通り、「primary」「secondary」「info」など既存に新たに「pink」「orange」を追加します

方法としては、「npm」を使い「scss」ファイルを書き換える方法となります

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

https://github.com/Yulikepython/

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

コードの紹介

【ファイル名：customBoot.scss】

@import "~bootstrap/scss/functions.scss";
@import "~bootstrap/scss/variables.scss";
@import "~bootstrap/scss/mixins.scss";

$custom-colors:(
    "pink": pink,
    "orange":orange,
);

$theme-colors: map-merge($theme-colors, $custom-colors);

@import "~bootstrap/scss/bootstrap.scss";

【ファイル名：App.js】

ファイルのインポートをします

....
import "./cutomBoot.scss"
....
....

解説

SCSSでは$変数名とすると、既存の変数へアクセスが可能です

既存の色は$theme-colorsという変数に保存されているため、$theme-colorsへ新たなthemeを追加をします

$custom-colorsという変数へ、新たな「pink」「orange」を作成し、既存の$theme-colorsへ追加します

$custom-colors:(
    "pink": pink,
    "orange":orange,
);

$theme-colors: map-merge($theme-colors, $custom-colors);

ファイルの前後では変数を使用するために、variablesなどをインポートします

以上、Boostrapで新たなtheme-colorsを追加する方法でした