I have a React component that is using css-modules. Is there a way for me to get access to the SASS variables used in the css-module?
My styles.scss file is using a shared _colors.scss file. My files look something like this (note the comment for use-case):
index.jsx
import styles from './styles';
import React from 'react';
import SomeFooBarComponent from 'irrelevant';
export default class MyComponent extends React.Component {
render() {
return (
<div className={styles.root}>
<h1>My amazing page</h1>
{/* I want to use a variable here, rather than hard-code the color.
I want that variable to come from my imported styles file (i.e. through the `styles` object) */}
<SomeFooBarComponent takesAColorProperty="#00FF00" />
</div>
);
}
}shared/variables/_colors.scss
$brand-primary: #FF0000;
$brand-secondary: #00FF00;
styles.scss
@import "~shared/variables/colors";
.root {
color: $brand-primary;
}
I have a React component that is using css-modules. Is there a way for me to get access to the SASS variables used in the css-module?
My
styles.scssfile is using a shared_colors.scssfile. My files look something like this (note the comment for use-case):index.jsxshared/variables/_colors.scssstyles.scss