CSS Variable issue with sass script execution about ember-bootstrap

[jelhan]

Did you double checked that you are using the same Bootstrap version before and afterwards? And the same version of Ember CLI SASS? Is the error getting away if you use Ember Bootstrap but continue to integrate Bootstrap SASS in the build manually?

[JackHowa]

Thanks for responding @jelhan.

Did you double checked that you are using the same Bootstrap version before and afterwards?

I changed the variable overrides without upgrading or changing any dependencies. I'm not sure I follow but these are my dependency versions:

ember-ui % npm ls bootstrap
└── [email protected]
npm ls ember-bootstrap
─ [email protected]

And the same version of Ember CLI SASS?

I didn't change the dependency either. I only changed the override value to use a SassScript with a css variable inside.

ember-ui % npm ls ember-cli
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected] 

Is the error getting away if you use Ember Bootstrap but continue to integrate Bootstrap SASS in the build manually?

I'm not sure I follow. Can you explain how I would go about testing this? I'm updating the variable override in the bootstrap overrides file in one of the files that is manually updated in the app.scss.

<!-- index.html -->

<!-- toggle with media query -->
<style>
  --__color-text-primary: #00000;
</style>

// app.scss
// Define Bootstrap variables and override with css variables
@import 'variables';

// ember-bootstrap import
@import 'ember-bootstrap/bootstrap';

// _variables.scss
$black: #{var(--__color-text-primary)};

---

Investigating, this may be due to this instead https://stackoverflow.com/questions/61397995/css-variable-not-working-within-scss-when-i-use-var-and-rgba. No hex codes were used previously so I don't know why that would affect things rather than rgba

---

I also tried directly importing the css into the app.scss

// app.scss
// define css variables
@import 'definition-variables';

// Define Bootstrap variables and override with css variables
@import 'variables';

// ember-bootstrap import
@import 'ember-bootstrap/bootstrap';

// definition-variables.css
:root {
	--__color-text-primary: #00000;
}

[jelhan]

Got it. I thought it was an issue introduced by migrating to Ember Bootstrap.

The error tells you that it's not a valid color.

$black: #{var(--__color-text-primary)};

The # looks wrong to me. Could be caused by that. Or the Bootstrap utility does not support CSS custom properties. Support for those is still limited.

[jelhan]

Going to close this issue as it's not related to Ember Bootstrap. StackOverflow might a good place for this question.