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

CSS

(最終更新月:2021年8月)

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

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

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

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

コードの紹介

【ファイル名: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を追加する方法でした

タイトルとURLをコピーしました