カスタマイズ
use-bootstrap の強力なSASSシステムは、アプリケーションを簡単にカスタマイズできます。
設定
use-bootstrap では HTMLコンポーネントとBootstrapコンポーネントの二種類があり それぞれコンポーネント名のプリフィックスを指定できます。
tsnuxt.config.ts
Sass
Theme colors
アプリケーションカスタマイズの第一歩は、Themeカラーを設定することです。
Sassファイルをassetsフォルダに保存してください。
scssassets/scss/_variables.scss
作成したSassファイルを含めるように、nuxt.config.tsファイルを編集します。
tsnuxt.config.ts
Additional Sass files
更に追加のSASSファイルを含めるには、usebootstrapの後ろにファイルパスを追加してください。
tsnuxt.config.ts
Vue SFC CSS
VueのSFC CSS機能を利用して、部分的にStyleを適用することができます。
Element Content
vue
UnoCSS
Bootstrapで指定できないStyleは、UnoCSSで指定できます。
Theme 変数の値はBootstrap5との互換性のため調整されています。
Class attribute
un- プリフィックスを利用してUnoCSSを利用できます。
Element Content
vue
Responsive Design
Custom Range プリフィックスを利用して特定の範囲のbreakpointを対象にCSSを適用できます。
Element Content
vue