How to utilize CSS-modules variables within Javascript?
add a comment
1 Answer
CSS-modules are a great way to organize and modularize CSS, and they can also be used to define variables. Here's how you can utilize these variables within JavaScript:
- Declare your CSS variables in a .css file with the :root selector:
:root {
--primary-color: blue;
--secondary-color: red;
--font-size: 16px;
}
- Import your CSS file into your JS module using import statement:
import styles from './styles.css'; // import CSS-modules
Note: It's important to ensure your CSS file is imported with a .css extension, and that you have set up webpack to handle these imports.
- Access your CSS variables from the styles object:
console.log(styles['--primary-color']);
console.log(styles['--secondary-color']);
console.log(styles['--font-size']);
This will print the value of the CSS variables onto the console.
- Use your CSS variables in your JS module:
document.body.style.backgroundColor = styles['--primary-color'];
This will set the background color of the <body> element to the value of the --primary-color variable.
That's it! You can now use your CSS-modules variables directly in your JavaScript, making your code more maintainable and organized.
Your Answer
Stats
Asked: 2023-07-15 12:33:49 +0000
Seen: 10 times
Last updated: Jul 15 '23