BootstrapとBootstrapVueのテーマ設定

テーマ設定は、Sass変数、Sassマップ、およびカスタムCSSによって実現されます。専用のテーマスタイルシートはありません。代わりに、組み込みのテーマを有効にして、グラデーション、影などを追加できます。

BootstrapVueはBootstrapのCSSを使用していますが、BootstrapVueの一部の機能（例：積み重ねられたテーブルなど）はカスタムCSSを使用しています。私たちのカスタムCSSは、Bootstrap v4.x SCSSで定義された変数に依存しています。bootstrap-vue/dist/bootstrap-vue.cssは、デフォルトのBootstrap v4.x変数を使用してコンパイルされます。BootstrapVueソースSCSSを使用することで、（ブレークポイント、テーマカラーなど）変数オーバーライドで、カスタムBootstrapVue CSS生成を調整できます。

プレミアムダッシュボードとテーマについては、ドキュメントのテーマセクションを参照してください。

SASS変数のデフォルト

Bootstrap v4とBootstrapVueのすべてのSass変数には、!defaultフラグが含まれています。これにより、BootstrapおよびBootstrapVueのソースSCSSコードを変更せずに、独自のSassで変数のデフォルト値を上書きできます。必要に応じて変数をコピー＆ペーストし、値を変更して、!defaultフラグを削除します。変数がすでに割り当てられている場合、BootstrapおよびBootstrapVueのデフォルト値によって再割り当てされることはありません。

Bootstrapの変数の完全なリストは、bootstrap/scss/_variables.scssにあります。一部の変数はnullに設定されています。これらの変数は、設定で上書きされない限り、プロパティを出力しません。

同じSassファイル内の変数オーバーライドは、デフォルト変数の前後に記述できます。ただし、Sassファイル全体をオーバーライドする場合、オーバーライドはBootstrapおよびBootstrapVueのSass（SCSS）ファイルをインポートする前に記述する必要があります。

以下は、BootstrapおよびBootstrapVue SCSSをインポートおよびコンパイルするときに、<body>のbackground-colorとcolorを変更する例です。

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';

デフォルトテーマカラー

Bootstrap v4.4 SCSSで定義されているデフォルトのテーマカラーは次のとおりです。

プライマリ

セカンダリ

成功

危険

警告

情報

明るい

暗い

BootstrapVueコンポーネントは、これらのデフォルトテーマカラーのバリエーション（強度）を使用します。

これらのテーマカラーを変更したり、SASS変数とマップを介して必要に応じて追加のテーマカラーを作成したりできます。詳細については、Bootstrapテーマのドキュメントを参照してください。すべてのテーマカラーは、すべてのBootstrapVueコンポーネントのカラーバリアントとして自動的に利用可能になります。

SASSオプション

組み込みのカスタム変数ファイルを使用してBootstrap 4をカスタマイズし、Bootstrapの$enable-*Sass変数を使用してグローバルCSSの設定を簡単に切り替えます。

Bootstrap SASS変数

よく使用されるBootstrap v4変数の一部を以下に示します。

変数	タイプ	デフォルト	説明
`$enable-rounded`	Boolean	`true`	さまざまなコンポーネントで定義済みの`border-radius`スタイルを有効にします
`$enable-shadows`	Boolean	`false`	さまざまなコンポーネントで定義済みの`box-shadow`スタイルを有効にします
`$enable-gradients`	Boolean	`false`	さまざまなコンポーネントの`background-image`スタイルを介して定義済みのグラデーションを有効にします
`$enable-transitions`	Boolean	`true`	さまざまなコンポーネントで定義済みの`transition`を有効にします
`$enable-responsive-font-sizes`	Boolean	`false`	レスポンシブフォントサイズを有効にします
`$enable-validation-icons`	Boolean	`true`	テキスト入力と一部のカスタムフォーム内で、検証状態用の`background-image`アイコンを有効にします

Bootstrap v4変数の詳細については、Bootstrapのテーマドキュメントを参照してください。

BootstrapVue SASS変数

BootstrapVueは、BootstrapVueのカスタムCSS生成を制御するためのいくつかのSass変数も定義します。プロジェクトでこれらの機能を使用していない場合は、機能のCSS生成を無効にして、BootstrapVueのカスタムCSSバンドルのサイズを小さくすることができます。

変数	タイプ	デフォルト	説明
`$bv-enable-table-stacked`	Boolean	`true`	積み重ねられたテーブルのCSS生成を有効にします
`$bv-enable-table-sticky`	Boolean	`true`	固定テーブルヘッダーと列のCSS生成を有効にします
`$bv-enable-tooltip-variants`	Boolean	`true`	ツールチップバリアントのCSS生成を有効にします
`$bv-enable-popover-variants`	Boolean	`true`	ポップオーバーバリアントのCSS生成を有効にします

BootstrapVueのカスタムCSSのさまざまな側面を制御する追加の変数は、bootstrap-vue/src/_variables.scssで確認できます。BootstrapVueのカスタムSCSSは、BootstrapのSASS変数、関数、およびmixinに依存することに注意してください。

カスタムテーマの生成

BootstrapVueで独自のテーマと色を使用するには、プロジェクトにcustom.scssファイルを作成する必要があります。これは、メインアプリのapp.vueファイルに含めることができます。

テンプレート経由

<style lang="scss">
  // Import custom SASS variable overrides, or alternatively
  // define your variable overrides here instead
  @import 'assets/custom-vars.scss';

  // Import Bootstrap and BootstrapVue source SCSS files
  @import '~bootstrap/scss/bootstrap.scss';
  @import '~bootstrap-vue/src/index.scss';

  // General style overrides and custom classes
  body {
    margin: 0;
  }

  .my-widget {
    color: var(--danger);
  }
  // ...
</style>

custom-vars.scssファイルは、BootstrapのSCSSおよびBootstrapVueのSCSSの前にロードする必要があります。これには、Bootstrap v4の変数オーバーライド（色、影、フォントサイズ、ブレークポイントなど）が含まれます。

アプリのメインエントリポイント経由

カスタムテーマ変数を使用してSCSSファイルを作成します。このファイルはBootstrapおよびBootstrapVueのSCSSもインポートします。

// File: custom.scss

// Define your variable overrides here
$enable-shadows: true;
$enable-gradients: true;
$grid-breakpoints: (
  xs: 0,
  sm: 456px,
  md: 789px,
  lg: 999px,
  xl: 1234px
);
$bv-enable-table-stacked: false;

// Include Bootstrap and BootstrapVue SCSS files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

// General style overrides and custom classes
body {
  margin: 0;
}

.my-widget {
  color: var(--danger);
}
// ...

次に、その単一のSCSSファイルをメインアプリコードのエントリポイントにインポートします

import 'custom.scss'

可能なすべての変数は、node_modules/bootstrap/scss/_variables.scssにあります。

Vueでscssを使用するには、sassとsass-loaderを含めることを忘れないでください

npm install --save-dev sass sass-loader

注：ビルド環境に基づいて、SCSSインポートパスを調整する必要がある場合があります。

カスタムテーマカラーの作成例については、カラーバリアントのリファレンスページのカスタムバリアントの作成セクションを参照してください。

CSS変数

BootstrapのSCSSは、コンパイルされたCSSで約20個のCSSカスタムプロパティ（変数）を生成します。これらは、ブラウザのインスペクター、コードサンドボックス、または一般的なプロトタイピングで作業するときに、テーマカラー、ブレークポイント、プライマリフォントスタックなどの一般的に使用される値に簡単にアクセスできるようにします。

利用可能なBootstrap CSS変数

生成されるCSS変数を次に示します。表示される値は、Bootstrap v4のデフォルトに基づいています。

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}

SASS変数とマップを設定し、SCSSを再コンパイルすると、上記の生成されたSCSS変数も更新されます。

例

CSS変数は、SASSの変数と同様の柔軟性を提供しますが、ブラウザに提供される前にコンパイルする必要はありません。たとえば、ここでは、CSS変数を使用して、ページのフォントとリンクのスタイルをリセットし、テーマカラーを使用するカスタムクラスを作成しています。

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}

a {
  color: var(--blue);
}

.custom-class {
  color: var(--primary);
  background-color: var(--dark);
}

参照

プレミアムダッシュボードとテーマについては、ドキュメントのテーマセクションを参照してください。
カスタムブレークポイント名を定義する場合は、BootstrapVueの<b-col>および<b-form-group>のブレークポイント固有のプロパティを更新する方法については、BootstrapVueの設定ページを参照してください。
BootstrapのSCSS/CSSのテーマ設定の詳細については、公式Bootstrap v4テーマドキュメントを参照してください。