Next.jsでbootstrap4の色をカスタマイズして使う
2167 ワード
まず 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
を参照のこと。
Author And Source
この問題について(Next.jsでbootstrap4の色をカスタマイズして使う), 我々は、より多くの情報をここで見つけました https://qiita.com/loadlimits/items/a3543f3282fede8e57e0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .