CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4sassbootstrap-5
Zollikofen4
Zollikofen4

Reputation: 251

Bootstrap and Sass: error when converting SCSS files to CSS. Error: Undefined variable @each $color, $value in $theme-colors-rgb

I would like to shrink the size of the bootstrap file bootstrap.min.css. I've found that a good way to do this is to use SASS, then SCSS, so I can import only the specific components I need. I've never used them, only used CSS so far. I'm using the latest version of Bootstrap, and I'm downloading the Sass [source files][1] in Bootstrap.

When I try to convert scss file to css, I get an error. I've already read several solutions on stackoverflow (example import @import "../scss/bootstrap/maps";), but they didn't help me. Here is the error:

Error: Undefined variable.
    ╷
21 │ @each $color, $value in $theme-colors-rgb {
    │ ^^^^^^^^^^^^^^^^^
    ╵
   scss/bootstrap/_root.scss 21:27 @import
   scss/custom.scss 16:9 root stylesheet

The path is Desktop/myproject/scss/bootstrap. These are the steps I performed:

  1. In the project, I added scss folder. Inside I created a folder called bootstrap where all the ssc files are present. So myproject/scss/bootstrap (downloaded from above link).

  2. In the project, I added a file called custom.scss. So myproject/scss/custom.scss

3.In the custom.scss file (i only have this in custom, then there is nothing left in the file), I added the name of the components I need:

@import "../scss/bootstrap/functions";
@import "../scss/bootstrap/variables";
@import "../scss/bootstrap/mixins";
@import "../scss/bootstrap/root";
@import "../scss/bootstrap/reboot";
@import "../scss/bootstrap/type";
@import "../scss/bootstrap/images";
@import "../scss/bootstrap/containers";
@import "../scss/bootstrap/grid";
@import "../scss/bootstrap/offcanvas";
@import "../scss/bootstrap/navbar";
@import "../scss/bootstrap/card";
@import "../scss/bootstrap/dropdown";
@import "../scss/bootstrap/list-group";
@import "../scss/bootstrap/nav";
  1. I try to convert the custom.scss file into bootstrap.min-news.css, then in the Visual Studio terminal I write: sass scss/custom.scss:css/bootstrap.min-new.css

How can i convert the file without getting the error? Thank you

P.S: If I also try to import @import "../scss/bootstrap/maps";, I get the error:

Error: Undefined variable.
    ╷
55 │ "primary": $primary-text-emphasis-dark,
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^

UPDATE

Instead if I import @import "../scss/bootstrap/variables-dark", the problem is solved and the compilation takes place correctly, but I DONT'T want to use variables-dark, I don't need it, the file size increases unnecessarily. My goal is to reduce the size

Upvotes: 1

Views: 2020

Answers (1)

joshmoto
joshmoto

Reputation: 5118

OK so I tested this very basic bootstrap 5.2.3 npm install compiling scss.

Which is taken from 5.2 docs, see commented version in doc version...

https://getbootstrap.com/docs/5.2/customize/sass/#importing

This order of scss imports compiles fine for me...

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

However if I run the same scss above in bootstrap 5.3.0 I get this error...

SassError: Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

So I checked the docs for 5.3, and there is addition of variables dark scss...

https://getbootstrap.com/docs/5.3/customize/sass/#importing

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

Compiling the scss above for 5.3 now works.

Update 1

So the code provided above is bare minimum for the bootstrap css framework to work.

You then start to add the extra components after utilities like this...

// core files
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// extra components
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/nav";

The above code compiles css at 180 kib.

If you're still struggling with compiled size being to big, you can remove colours from the $theme-color maps...

// core files
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// remove colours
$theme-colors: map-remove($theme-colors, "body", "secondary", "tertiary", "emphasis", "border", "primary", "danger", "warning", "info", "light", "dark");

// core files continued
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// extra components
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/nav";

This compiles at 167 kib.

But you probably don't want to remove every colour especially the shades, for example you might just do the colours...

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

Hope this helps.

Update 2

For example, if you are using @import "bootstrap/scss/alerts"; this will create these classes in your compiled css...

.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark

By using map-remove like this...

$theme-colors: map-remove($theme-colors, "primary", "secondary", "info", "light", "dark");

This will then compile only these alert colours...

.alert-success
.alert-danger
.alert-warning

This will do the same for anything that uses the $theme-colors map to generate colour variants of components.

If you are not using a colour, you can remove from the $theme-colors map and it will reduce the size of your css and speed up compiling slightly.

Upvotes: 1

Related Questions