設定
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
export default defineNuxtConfig({
modules: ['usebootstrap'],
css: [
'usebootstrap/scss/usebootstrap',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@/assets/scss/_variables.scss";
`,
},
},
} },
},
);
Additional Sass files
更に追加のSASSファイルを含めるには、usebootstrapの後ろにファイルパスを追加してください。
tsnuxt.config.ts
export default defineNuxtConfig({
modules: ['usebootstrap'],
css: [
'usebootstrap/scss/usebootstrap',
'./assets/scss/doc.scss',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@/assets/scss/_variables.scss";
`,
},
},
} },
},
);
Vue SFC CSS
VueのSFC CSS機能を利用して、部分的にStyleを適用することができます。
Element Content
vue
<template>
<div>
Element Content
</div>
</template>
<style scoped>
div {
background-color: red
}
</style>