Encountering an issue with Bootstrap and Sass when trying to convert SCSS files to CSS due to an error involving an undefined variable @each $color, $value in $theme-colors

I have a goal to reduce the size of the bootstrap file bootstrap.min.css. After some research, I discovered that utilizing SASS and then SCSS is an effective method to achieve this by importing only the specific components needed. Despite my previous experience with CSS, I am new to using SASS. I am currently working with the latest Bootstrap version and have downloaded the Sass [source files][1] for Bootstrap.

However, when attempting to convert the SCSS file to CSS, I encountered an error. Despite exploring solutions on stackoverflow (such as importing 

@import "../scss/bootstrap/maps";
), none of them resolved the issue. The error message reads as follows:

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 file path is Desktop/myproject/scss/bootstrap. Here are the steps from my process:

  1. Within the project, I added a "scss" folder containing another folder named "bootstrap" where all the SCSS files reside - located at myproject/scss/bootstrap (downloaded from the provided link).

  2. In the project directory, I created a file called custom.scss at myproject/scss/custom.scss

3. In the custom.scss file (which contains only these imports), I listed the names of the required components:

@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. To convert the custom.scss file into bootstrap.min-news.css, I entered the following command in the Visual Studio terminal: 
    sass scss/custom.scss:css/bootstrap.min-new.css

Is there a way to successfully convert the file without encountering errors? Thank you

P.S: Trying to import 

@import "../scss/bootstrap/maps";
also results in the following error:

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

UPDATE

Upon importing 

@import "../scss/bootstrap/variables-dark"
, the problem was resolved, and the compilation proceeded correctly. However, since I do not require variables-dark, it unnecessarily increases the file size. My aim remains to decrease the overall size of the file

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Answer №1

After extensively testing the basic installation of bootstrap 5.2.3 with SCSS compilation, I have some insights to share.

I followed the documentation for version 5.2 and encountered no issues with the order of SCSS imports.

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

However, when attempting the same process with bootstrap 5.3.0, an error occurred due to undefined variables.

@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";

Upon reviewing the 5.3 documentation, I found that additional dark variables needed to be imported for successful compilation.

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

Subsequent compilations with the corrected imports worked seamlessly for bootstrap 5.3.

Update 1

In order to optimize the performance of your CSS framework setup, it's advisable to arrange components strategically after importing utilities.

// 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";

This configuration yields a compiled CSS size of 180 kib.

If size optimization is a concern, selectively removing colors from the $theme-color maps can be beneficial.

// 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 results in a compiled size of 167 kib while maintaining essential shades within the color palette.

For further refinement, adjustments to specific colors rather than entire sections can be made as necessary.

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

Consider implementing these optimizations to streamline your CSS workflow effectively.

Update 2

When utilizing 

@import "bootstrap/scss/alerts";
, various alert classes are generated in the compiled CSS.

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

To refine the color options, utilizing map-remove allows for customization based on specific preferences.

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

This targeted approach optimizes CSS output by including only desired color variants.

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

By fine-tuning the $theme-colors mapping, unnecessary color variations can be eliminated, enhancing both file size and compilation speed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

htmlcss

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

jquerycss

Achieve uniform column height with Bootstrap 2 columns of equal height positioned between two larger columns

I am struggling to find a solution for a unique case in Bootstrap: Click here The challenge is to create 1 row with 3 columns. The first column should display a responsive image, the center column should contain two different text blocks (white and blue) ...

bootstrap-4

Enhance your web design with the mesmerizing jQuery UI drop effect combined

I'm attempting to create an animated toggle effect on a box using jQuery UI's drop feature. However, I've encountered some trouble due to the box having box-sizing: border-box applied which is causing issues with the animation. During the a ...

jqueryjquery-uicss

When you hover over the button, it seamlessly transitions to a

Previously, my button component was styled like this and it functioned properly: <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 ...

javascriptcssreactjstypescriptmaterial-ui

The nested div does not have scrolling functionality

I'm currently working on making a nested div scrollable, but I'm encountering some challenges. The problematic div in question is the one with the "items" class. <body> <div class="page-wrapper"> <div class="header">Heade ...

htmlcss

Is it possible to populate a Bootstrap Table using JSON data stored in a PHP variable rather than from a file?

Conventional method: <table data-toggle="table" data-url="data2.json" data-sort-name="name"> In my particular scenario, using json file is not ideal as it's our live response. Do you have any alternative solutions? ...

jsontwitter-bootstrap

Navigating Gridview Pagination in a Bootstrap 4.0 modal popup window in ASP.NET

Seeking advice on why the paging functionality is not working correctly or why the popup page is not being refreshed properly. I have created a User Control with Bootstrap modal content and a GridView. ASP Page (Control): <asp:Panel runat="server" ID= ...

c#asp.netbootstrap-4

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

javascripthtmlcssright-to-left

React not displaying images with relative paths

In the past, I used to import images in React like this: import person from '../images/image1.png' And then use them in my code like this: <img src={person} alt="" /> Now, for some reason, I want to directly specify the image pa ...

javascripthtmlcssreactjs

Arranging div elements in a vertical stack with CSS

Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property ( ...

htmlcsslinear-gradients

Achieving consistent spacing between elements within a column in Bootstrap 5

Picture a bootstrap column filled with various elements such as divs, paragraphs, and links. How can I evenly space these elements inside the column without using margins or padding? I am looking for an automatic way for the elements to be spaced equally a ...

htmlcssbootstrap-5

Set Bootstrap column size to match a particular column

I am currently using BootStrap 4 and I am attempting to make a column's height equal to another column. Below is the code snippet I am working with: <div class="container" style="overflow:hidden"> <div class="row" style="overflow:hidden" ...

htmlcssbootstrap-4

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

I am looking to create a responsive tab design that drops down like the example shown below: Desktop/Large Screen View https://i.stack.imgur.com/hiCYz.png Mobile View https://i.stack.imgur.com/gRxLv.png I have written some code for this, but I am unsure ...

javascriptjqueryhtmlcss

The Bootstrap navigation bar button with two words is causing the second word to wrap to the next line

Having some trouble getting a bootstrap 5 navbar to display properly with a "Log In" button. The spacing issue is causing the button text to drop down to a second line, making the navbar longer than desired. Any tips on how to fix this? https://codepen.io/ ...

bootstrap-5

Modify CSS class if user is using Internet Explorer version 10 or above

I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...

javascriptjqueryasp.netcssinternet-explorer

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms