I have the list of color codes in the JS file.

JavaScript:

export var ColorCodes = { 
    first:'#D09FD2',  
    second:'#A72500',  
    third:'#F67GHI',   
    fourth:'#8FERDD',  
} 

I tried to use the js variables inside the CSS file like below.

it throws errors.

CSS:

import 'my.js'

.firstColor{

    font-size:15px;
    color:ColorCodes.first;
    }

.secColor{

    font-size:12px;
    color:ColorCodes.second;
    }

HTML

<div class="firstColor">aaa</div>   

I have the list of color codes in the JS file.

JavaScript:

export var ColorCodes = { 
    first:'#D09FD2',  
    second:'#A72500',  
    third:'#F67GHI',   
    fourth:'#8FERDD',  
} 

I tried to use the js variables inside the CSS file like below.

it throws errors.

CSS:

import 'my.js'

.firstColor{

    font-size:15px;
    color:ColorCodes.first;
    }

.secColor{

    font-size:12px;
    color:ColorCodes.second;
    }

HTML

<div class="firstColor">aaa</div>   

• javascript
• css
• reactjs

2 Answers 2

you cannot use js inside css, instead you should abstract your color codes inside your css and then use dynamic classes via javascript

There is a thing you can try, according with w3 it works, check it here .

:root {
  --first-color: #D09FD2;
  --second-color: #A72500;
  --third-color: #F67GHI;
  --fourth-color: #8FERDD;
}

.firstColor{

    font-size:15px;
    color:var(--first-color);
    }

.secColor{

    font-size:12px;
    color:var(--second-color);
    }