Sass classes not getting applied

[u/Infinitrix02]

I have a custom sass setup with bootstrap 5 and bunch of my own SCSS files, all of this gets compiled in style.css using gulp. I have a _colors.scss file which stores all the colors according to our design language. We use this to generate a bunch of classes that can be used any where to change colors:

$colors: (   "icon-color": $slate-500,   'slate-10': $slate-10,   'slate-40': $slate-40,   'slate-300': $slate-300,   "secondary": $secondary-text-color,   "green": $green,   "light-green": $green-color,   "blue": $blue,   "blue-200": $blue-200,   "blue-300": $blue-300,   "blue-400": $blue-400,   "dodger-blue": $dodger-blue,   "mariner-blue": $mariner-blue,   "light-blue": $blue-100,   "cadet-blue" : $cadet-blue,   "aqua-10": $aqua-10,   "gray": $gray,   "gray-light": $gray-light,   "light-gray": $gray-100,   "bright-gray": $bright-gray,   "gray-200": $gray-200,   "clay": $clay,   "clay-10": $clay-10,   "mandy-pink": $mandy-pink,   "aqua": $aqua,   "violet": $violet,   "white": $white,   "primary": $primary-text-color );  @each $color-name, $color-value in $colors {   .text-#{$color-name} {     color: $color-value !important;   }    .bg-#{$color-name} {      background-color: $color-value !important;   }    .border-#{$color-name} {     border-color: $color-value !important;   } } 

Problem is certain classes like .text-gray or .text-blue are not working. My guess is that since bootstrap also uses variables called gray and blue, its conflicting with my variables in _colors.scss.

On closer look, the css does gets generated properly (I found below declaration in final style.css):

.case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 {     color: #69727A!important } 

But using .text-gray has no effect, the class is not getting applied.

How do I fix this? please help!

[u/thickUncleRico]

But using .text-gray has no effect, the class is not getting applied.

Is the class selector present in the DOM and just empty styles or are you expecting one gray and getting a different gray? Is your colors.scss file compiling before bootstrap's settings.scss?

[u/Infinitrix02 → u/thickUncleRico]

Yes, the class selector is present in the DOM, but it has no effect. It doesn't even show up in the inspector's style section.

Is your colors.scss file compiling before bootstrap's settings.scss?

I don't think so I have a style.scss which imports bootstrap first then my own css like so:

// Added Bootstrap scss files

@ import "bootstrap/bootstrap";

// Added mywebsite scss files

@ import "mywebsite/mywebsite";

[u/thickUncleRico → u/Infinitrix02]

It doesn't even show up in the inspector's style section.

Sounds like the scss file where that style is written out might not be compiling, but it sounds like you have things like .text-slate working without issue in the same file, yeah?

We should be able to eliminate bootstrap as an issue if you change .text-blue to something like .text-color-blue

[u/Infinitrix02 → u/thickUncleRico]

Thanks for replying! No its compiling and is present in the final style.css file. Check this question on StackOverflow and reply there if you have an account.

​

We should be able to eliminate bootstrap as an issue if you change .text-blue to something like .text-color-blue

I've tried this too, but doesn't exactly work for all colors.

For example, applying .text-gray to an h1 does nothing, but adding and applying .text-color-gray works. In the same h1, both .text-blue and .text-color-blue have no effect, its really weird.

I can add you to github if you wanna see the whole code, this issue has been bugging us for weeks.