Configuration
In use-bootstrap, there are two types of components, HTML components and Bootstrap components, each of which can be prefixed with a component name.
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
The first step in application customization is to set the theme colors.
Please save the Sass file in the assets folder.
scssassets/scss/_variables.scss
$primary: #00bb8e;
Fonts
Fonts can be configured just like theme colors.
In the case of Google Fonts, they are automatically loaded by the module.
scssassets/scss/_variables.scss
$primary: #00bb8e;
$headings-font-family: "Noto Sans" ;
Edit the nuxt.config.ts file to include the Sass file you created.
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
To include additional Sass files, simply add the file path after 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
You can use Vue’s SFC CSS feature to apply styles partially.
Element Content
vue
<template>
<div>
Element Content
</div>
</template>
<style scoped>
div {
background-color: red
}
</style>