CODEWITHSUNDEEP
bootstrap-4sass
user2495085
user2495085

Reputation: 347

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

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?

Upvotes: 4

Views: 4122

Answers (2)

DotnetShadow
DotnetShadow

Reputation: 778

There is a github project that might give a hint on how to convert bootstrap to use the module system https://github.com/deepak0174/bootstrap-sass-use-migration/

Upvotes: 1

user2495085
user2495085

Reputation: 347

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
);

Upvotes: 6

Related Questions