How to import and customize bootstrap with @use in SASS/SCSS

Question

How do you import and customize bootstrap via SASS variables?

We all use @import, which works well but is deprecated, like this:

// customVariables.scss
$theme-colors: (
    "primary": #1818a1,
    "secondary": #b8e792,
    "success": #000,
    "danger": #ff4136,
    "warning": #fbbb01,
    "info": #a76a6a,
    "dark": #0e0e68,
    "light": rgb(228, 70, 210),
    "nav-active-bg": #3687bd,
    "light-body": #e092cd,
    "light-card": #77d1d1
);

// customBootstrap.scss
@import url('./customVariables');
@import url('~bootstrap/scss/bootstrap');

It is important to import customVariables first, so the overriding variables already exist before importing bootstrap.

My question is: How do I achive the same with @use?

Answer 1

I have read the following page: Introduction to SASS

The conculsion is that:

1. The use of @use is preferred.
2. The code is much cleaner, since @use loaded files will only load once.
3. The below customBootstrap.scss can then be imported into your main index.scss file, since bootstrap will be forwarded only by using @forward and cannot be used locally in customBootstrap.scss.

The code looks like this:

// customBootstrap.scss
@use './customVariables';
@forward '~bootstrap/scss/bootstrap' with(
    $theme-colors: customVariables.$theme-colors
);