Next.jsでbootstrap4の色をカスタマイズして使う

2167 ワード
next.js bootstrap4 JavaScript JavaScript テキストリンク

まず bootstrap と sass をインストールする。

npm i bootstrap
npm i sass

ファイル構成は以下の想定で、 bootstrap-variables.scss を新しく作成する。

/
├ pages/
│ ├ _app.js
│ ├ index.js
│ └ ...
└ bootstrap-variables.scss

アプリケーション全体に適用したいので、 _app.js の先頭に記述します。

// import 'bootstrap/dist/css/bootstrap.min.css' // ← カスタマイズ不要な場合
// import 'bootstrap/scss/bootstrap.scss' // ← bootstrapをsassで読み込みたい場合
import '../bootstrap-variables.scss' // カスタマイズ用

bootstrap-variables.scss には、上書きする値を記入して、最後に bootstrap.scss をimportすればOKです。

$theme-colors: (
    "primary": #467AFF,
    "danger": #FF4646
);

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

これでボタンの色を変更できます。

before after

編集可能なパラメータは node_modules/bootstrap/scss/_variables.scss を参照のこと。