Customize

The powerful SASS system of use-bootstrap allows you to easily customize your applications.

On this page

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

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

Edit the nuxt.config.ts file to include the Sass file you created.

tsnuxt.config.ts

Additional Sass files

To include additional Sass files, simply add the file path after usebootstrap.

tsnuxt.config.ts

Vue SFC CSS

You can use Vue’s SFC CSS feature to apply styles partially.

Vue SFC CSS

Element Content
vue

UnoCSS

Styles that cannot be specified with Bootstrap can be specified with UnoCSS.

UnoCSS Module

Class attribute

Without adding additional explanations or descriptions, you can use UnoCSS with the ‘un-’ prefix.

Element Content
vue

Responsive Design

Without adding additional explanations or descriptions, you can use UnoCSS with the ‘Custom Range’ prefix to apply CSS targeting specific breakpoints.

Element Content
vue
On this page