【簡単】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を追加する方法でした

当ブログは、「プログラミング初心者が一からWebアプリを作り、ネットで公開するまで」を解説しているサイトです。

日報アプリを一から開発し、ウェブに公開するまではこちらにまとめています

また、公開したウェブアプリはこちら(https://nippo.itc-app.site)でご覧いただけます(公開後もアップデート中)

 

その他、各分野別に

  1. Pythonについて
  2. HTML・CSSについて
  3. Djangoフレームワークについて
  4. Webサーバーについて
  5. 実際に公開をする方法

を記載したページも用意しています

 

ご自身の目的に合わせて、お好きな箇所からご覧ください

404 NOT FOUND | ITCブログ
今の自分にチャレンジする
タイトルとURLをコピーしました