Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change.

https://i.sstatic.net/xjrsx.png

I attempted the following:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

and

$primary: #FF9671
$theme-colors: ("primary": #FF9671)
$link: $primary

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

On a side note, Bootstrap suggests importing only:

@import "../bootstrap/scss/functions"
@import "../bootstrap/scss/variables"
@import "../bootstrap/scss/mixins"

However, this did not produce any changes for me. As a result, I had to import the entire bootstrap.scss file to see any effects. This feels like excessive work. Any suggestions?

Thank you in advance

csssassbootstrap-4

Answer №1

Exploring the implementation of Bootstrap variables within the variables.scss file...

$link-color: theme-color("primary") !default;
$component-active-bg: theme-color("primary") !default;

It's interesting to note that some theme-color() dependent variables, such as bg-, alert-, and text- are set by iterating through the theme-colors map. However, you can directly override the $primary theme-color without importing "functions" and "variables" first like so... 

$theme-colors: ();
$theme-colors: (
  primary: #FF9671
);

@import "bootstrap";

Check out Demo 1:

Alternatively, you have the option of simply overriding $primary in this manner...

$primary: #FF9671;
@import "bootstrap";

View Demo 2:

For more information, see: Unable to override $theme-color in bootstrap 4

Answer №2

After lots of confusion and head-scratching, I finally realized that my file imports were out of order.

File arrangement

css/  
|– bootstrap/  
|– custom/  
   _all.sass  
   _variables.sass  
|– main.sass

Original main.sass

@charset "utf-8"

@import "bootstrap/scss/bootstrap"
@import "custom/all"

The custom import was at the bottom when it should have been above. So, it now looks like this:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

I mistakenly believed that the order only mattered in my variables file, which had the following content:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

This realization also led me to understand that I don't need to include bootstrap within my variables file since it is imported in main.sass. This means my main.sass file now appears as follows:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

Therefore, my variables file simplifies to:

variables.sass

$primary: #845EC2

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

Issue with the Animated Skill Bar not functioning properly when scrolling

I've been trying to implement an animated skill bar in my Portfolio using JQuery, but I'm facing some challenges. Despite following various tutorials, the code doesn't seem to work as expected. I've tried calculating section scroll posi ...

javascriptjqueryhtmlcssscroll

Is it possible for a media query to target only 2 elements instead of all 3?

Currently, I am dealing with an older website for a client, and it appears that a media query is not correctly affecting three specific classes out of the total. These problematic classes are .free-ship, .wholesale, .chronicles The CSS styling for these c ...

htmlcssjoomla

Modify the Bootstrap 4 tooltip design dynamically without the need for a page refresh

There are buttons for bookmarking items, and the design requires a tooltip to show up over the bookmark button when hovered over. Initially, the tooltip should have a yellow background with the text "Save". After the button is clicked, it should change to ...

jquerytwitter-bootstrapbootstrap-4twitter-bootstrap-4

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

My current project involves Mui V5 and I am looking to customize the TreeView component. Specifically, I need to remove the collapse/expand icons as I want them to be integrated into the TreeItem label component on the left side instead of the right. Add ...

javascriptcssreactjsmaterial-uitreeview

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...

javascripthtmlcssangularjserror-handling

What are the steps to switch multiple CSS styles for creating a dark mode?

I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...

javascripthtmlcssdarkmode

How can I adjust the height of the carousel slider to fit the course section perfectly?

I am currently working on a new website that includes a carousel slider in one of its sections. I am trying to figure out how to make the slider fit within that section while still maintaining responsiveness. Any suggestions on how to achieve this? I am u ...

jqueryhtmlcssbootstrap-4slider

The jQuery slider comes to a gradual halt

I can't figure out why my jQuery slider doesn't stop right away after a mouseover event. There seems to be a delay that I can't resolve on my own. Can someone lend a hand with this problem? Here is the code I'm working with: https://js ...

jquerycssslider

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

Liquid Static Content

What is needed to fix the fluid-fixed layout issue? HTML: <div class="header"> <div class="title">Title</div> <div class="options">Opt</div> </div> CSS: .header{margin:0;padding:0;} .title{margin-right:50px; ...

htmlcsslayout

What is the best way to animate CSS elements using jQuery to slide in from the right, left, or bottom?

When the page is scrolled on my website, I want table_area-left to move from left to right to its current position, table_area-right to move from right to left to its current position, and morph button to move from down to up. I am struggling to find the j ...

javascriptjqueryhtmlcss

Unable to set width for td element in media query is not functioning as expected

Is there a way to adjust the width of td elements for smaller screens within an email template? I have tried setting the style as important, but it doesn't seem to be working. CSS .alignmentColumn { width: 25% !important; //for desktop @med ...

htmlcss

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

Don't pay attention to the parent form tag in Bootstrap

Here is the code snippet I am working with: <div class="row"> <form id="update"> <div class="col-md-6"> <h1>Title</h1> </div> </form> <form id="insert"> <div class="col-md-6"> &l ...

htmlbootstrap-4

PostCSS Autoprefixer skips adding grid prefixes for Internet Explorer 11

Utilizing sass for compiling scss-files to css is essential for our project. Our main aim is to ensure IE11 compatibility, including grid support with the -ms-grid prefixes. To achieve this, we are leveraging the postcss autoprefixer tool on Windows throug ...

windowsnpmsasspostcssautoprefixer

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

<div id="sidebar" class="sidebar"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"> <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: a ...

javascriptjquerycss

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

htmlcsscentertext-alignmenttext-align

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss