Bootstrap CSS variables not being replaced

Question

I am developing some custom styles in Laravel and overriding the default bootstrap color variables.

This is inside my app.scss

@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

$primary: #625BF6;
$danger: #ff4136;

.btn-primary {
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

I have also made the changes in webpack.mix.js to use sass as the compiler

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css');

However, even after running npm watch or npm run dev, the variable $primary is not being substituted.

Why would this happen?

EDIT: I don't think its about bootstrap anymore or the order of variable. The variable is simply not being substituted.

AFAIK Bootstrap variables have to be replaced before the framework import. I personnaly put it in a _variables.scss file, and import it first — jurandou, May 09 '23 at 11:58
Does this answer your question? [How to extend/modify (customize) Bootstrap with SASS](https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-with-sass) — OMi Shah, May 09 '23 at 12:24
@OMiShah think this is not even about bootstrap anymore. The variable $primary is not being replaced in my css. it is just showing up as is. — YD8877, May 09 '23 at 14:34

score 1 · Answer 1 · answered May 09 '23 at 20:34

1

This is a breaking change in a recent SCSS version. The reason is $primary is actually a valid value for a CSS variable so it is no longer automatically replaced (in case that's what you wanted to input). To get the actual SCSS variable to be used you need to use interpolation:

@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

$primary: #625BF6;
$danger: #ff4136;

.btn-primary {
    --bs-btn-bg: #{$primary};
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

answered May 09 '23 at 20:34

apokryfos

38,771
9
70
114

Using interpolation didn't replace it either. I've given the answer to this question myself in one of the below answers. sass does not support css variables being set from sass variables. Using the $primary value in a non variable css property works fine. – YD8877 May 10 '23 at 09:16
@YD8877 that is factually incorrect. I had the exact same issue and interpolation fixed it for me. SCSS definately supports setting CSS variables using SCSS variables in this way – apokryfos May 10 '23 at 10:19

score 0 · Answer 2 · answered May 09 '23 at 12:01

0

Try to define the variable and then import it.

// Define variables
$primary: #625BF6;
$danger: #ff4136;

// Import styles
@import '~bootstrap/scss/bootstrap';
@import "node_modules/font-awesome/scss/font-awesome.scss";

.btn-primary {
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

Then npm watch or npm run dev

answered May 09 '23 at 12:01

Abdulla Nilam

36,589
17
64
85

I think this is not even about bootstrap anymore. The variable $primary is not being replaced in my css. it is just showing up as is. – YD8877 May 09 '23 at 14:35

score 0 · Answer 3 · answered May 09 '23 at 15:52

The sass value is getting replaced for a regular property but not for css variables

$primary:   #625BF6;
$danger:    #ff4136;

@import '~bootstrap/scss/bootstrap';

.btn-primary {
    background-color:$primary;
    --bs-btn-bg: $primary;
    --bs-btn-hover-bg: #6b64f5;
    --bs-btn-active-bg: #534bf3;
}

So, it looks like sass does not support css variables being set from sass variables.

Bootstrap CSS variables not being replaced

3 Answers3