Overview

Prerequisites

1. Modify styles.scss

In styles.scss add the following line:

@import "assets/scss/core";

2. Create folders

In your project assets folder, create a new folder and name it scss. In this folder create 2 new folders: app and vendors

NB: app folder will contain app styles. vendors folder will contain override styles for 3rd party css such as Bootstrap or Leafletjs. 

/src
    /assets
        /scss
            /app
            /vendors

3. Create core.scss

In the assets/scss folder, create a new file and name it core.scss. Add these lines:

@import "app/app";
@import 'vendors/vendors';

4. Create app.scss

In the assets/scss/app folder, create a new file and name it _app.scss. Add this line:

@import 'variables';

5. Create vendors.scss

In the assets/scss/vendors folder, create a new file and name it _vendors.scss. Add this line:

@import 'bootstrap';

6. Create variables.scss

In the assets/scss/app folder, create a new file and name it _variables.scss. Add these lines:

//
// Breakpoints
//

// Extra small screen / phone
$xs: 320px;

// Small screen / phone
$small: 34em;

// Medium screen / tablet
$medium: 48em;

// Large screen / desktop
$large: 62em;

// Extra large screen / wide desktop
$xl: 75em;

7. Create bootstrap.scss

In the assets/scss/vendors folder, create a new file and name it _bootstrap.scss. Use this file to override Bootstrap styles

Next

Load Bootstrap 5

Reference

Sass