CODEWITHSUNDEEP
cssangularsassbootstrap-4
Matthew Mullin
Matthew Mullin

Reputation: 7646

Setting SASS variable to CSS3 variable causes error in Bootstrap 4

StackBlitz link

For some reason when setting Bootstrap variables to a CSS3 variables my Angular 6 app breaks with the following error

enter image description here

This is indeed the first usage of the SCSS variable in the bootstrap file, so it is obviously not happy with how I am setting it. I have made a very simple StackBlitz to replicate the issue. Have a look at the styles.scss.

Essentially this is what produces this error.

styles.scss

:root{
  --primary: #0f0;
}

$primary: var(--primary); // Broken
// $primary: #f00;  // Working

@import '../bootstrap/scss/bootstrap';

Any ideas on why Bootstrap may not be happy with this?

Upvotes: 0

Views: 289

Answers (1)

Matthew Mullin
Matthew Mullin

Reputation: 7646

Found the answer.

It appears you cannot use css variables within SASS functions due to the dynamic nature of css variables together with the fact that sass is a preprocessor.

See this stack for a more detailed explanation.

Upvotes: 1

Related Questions