How can we import js file variable in css file

Question

I have tried to to that using this line of code but it doesn't work

@import url("Javascriptfile.js");

and <script type="text/javascript" src="Script.js">

these two ways doesn't work.

in js file I have

export const PrimaryColor = "#4267B2";

and I want to import it in my css file how can i do it?

To make changes to your css dependent on your js, I believe you need to have your js modify the loaded css objects, but my knowledge is fairly old. An alternative is to make your js dependent on the css, by adding style info classes that the js reads at startup. So your css could define a style for PrimaryColor, and your javascript could read it, and use that value as the constant variable PrimaryColor that it then uses for other features not directly driven by the css. — Gem Taylor
– Gem Taylor, Commented Oct 21, 2019 at 14:07

Mathieu · Accepted Answer · 2019-10-21 15:03:07Z

2

I do not believe this is possible in any way.

You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).

I don't think it is ever possible to access "JavaScript world" from the scope of CSS.

However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

answered Oct 21, 2019 at 15:03

Mathieu

7597 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can we import js file variable in css file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related