How to import css root constant from another css file

Question

I have two css files constants.css and main.css

In my constants.css file root: { --primaryColor: red; }

In my main.css file .example { background-color: var(primaryColor); }

Expected behaviour is red color as background-color in . example class, but it's not working.

I tried @include 'constants.css' and @include url('constants.css'), but it didn't helped.

So my question is that how to include root constants from another css file?

user_10564525 · Answer

define your css variables in your constants.css

:root {
  --green: #119955;
}

then import it using @import './constants.css; in your main.css file. and use your variables

@import './constants.css';

body {
  background-color: var(--green);
}