カスタマイズ

use-bootstrap の強力なSASSシステムは、アプリケーションを簡単にカスタマイズできます。

設定

use-bootstrap では HTMLコンポーネントとBootstrapコンポーネントの二種類があり それぞれコンポーネント名のプリフィックスを指定できます。

tsnuxt.config.ts
export default defineNuxtConfig({
 modules: [
  'usebootstrap',
 ],
 usebootstrap: {
  scss: true,
  bootstrap: {
   prefix: ['', 'B'],
  },
  html: {
   prefix: 'B',
  },
  icon: {
   prefix: 'B',
  },
  extend: {
   prefix: ['', 'B'],
  },
  spec: {
   prefix: ['', 'B'],
  },
  unocss: {
   prefix: 'un',
  },
  image: true,
  fonts: true,
  sitemap: true,
  robots: true,
  shiki: true,
  leaflet: true,
  mdc: true,
  tiptap: true,
  vueuse: {
   prefix: '',
  },
  pwa: true,
  aos: true,
  echarts: true,
  dynamicRoute: {
   prefix: '',
   defaults: {
    lang: 'en',
   },
  },
  swiper: {
   prefix: '',
  },
  integration: {
   prefix: '',
  },
 },
});

Sass

Theme colors

アプリケーションカスタマイズの第一歩は、Themeカラーを設定することです。

Sassファイルをassetsフォルダに保存してください。

scssassets/scss/_variables.scss
$primary: #00bb8e;

Fonts

Themeカラーと同様にフォントも設定できます。

GoogleFontの場合は、moduleによって自動的にロードされます。

scssassets/scss/_variables.scss
$primary: #00bb8e;
$headings-font-family:  "Noto Sans" ;

作成したSassファイルを含めるように、nuxt.config.tsファイルを編集します。

tsnuxt.config.ts

Additional Sass files

更に追加のSASSファイルを含めるには、usebootstrapの後ろにファイルパスを追加してください。

tsnuxt.config.ts

Vue SFC CSS

VueのSFC CSS機能を利用して、部分的にStyleを適用することができます。

Vue SFC CSS

Element Content
vue
<template>
 <div>
  Element Content
 </div>
</template>

<style scoped>
  div {
    background-color: red
  }
</style>

See Also

Fonts

Unocss