3

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?

user2495085
  • 307
  • 1
  • 4
  • 13

2 Answers2

5

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
);
user2495085
  • 307
  • 1
  • 4
  • 13
  • When using 'forward with', every variable would have to be defined in customVariables and then placed in that block right? So if you want to override 100 variables, we would need to define them in customVariables and then in the forward block? – DotnetShadow May 09 '21 at 00:05
  • You might want to look into @each: https://sass-lang.com/documentation/at-rules/control/each – user2495085 Dec 03 '21 at 09:48
1

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/

DotnetShadow
  • 748
  • 1
  • 10
  • 28
  • Looks very interesting, thanks for sharing! For me however, I avoid dependencies on projects like this due to often poor maintainance... – user2495085 May 09 '21 at 07:38