score:10

Accepted answer

enter image description hereif you don't want to use styled-component then you can follow this link. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

score:0

it is possible to use custom variables with that project structure using css-vars mixin.

after proposing the option to evaluate custom variables before executing the scss function, a guy suggested me this mixin. i have just tested and works pretty nice.

score:1

there are different ways i can recomend you to tackle this.

1- duplicate the values of those variables. add them both on your variables.scss and as constants in some other file, maybe config.js or constants.js that way you'll be able to reference these values from your react components, the downside to this, is you'll have to remember to change them in two places if you have to modify the value.

2- consider using styled-components. with styled components you can define your styles within your components, using variables or props within the styles.

3- use some mechanism to define these variables in a single file or as environment variables, and setup your build process to be able to import these values into js and scss files.

score:3

i use a similar structure to organize my .scss files. i like having the styles in the same folder as the component. however, i import all scss files to my main.scss file. this helps avoid style conflicts in the dom.

main.scss

import "./scss/helpers.scss"
import "./variables.scss"
import "./footer/style.scss"
import "./header/styles.scss"

make sure to name your files with an underscore so that all the files get merged on compilation. note you don't need to name the underscore in the import.

_helpers.scss
_variable.scss
_style.scss

using this method you only need to import styles once into your app. index.jsx

score:19

from react 17

to access your scss variables into the react component, you need to do something like that

  1. install node-sass as a dependency or dev dependency
  2. no need to do any config change in webpack
  3. import as a module <-- main point

variables.module.scss

$color: skyblue;
$primarycolor: red;

:export {
    color: $color;
    primary-color: $primarycolor;
}

app.js

import variables from '<your_path>/variables.module.scss';

const app = () => {
    console.log(variables);
}

Related Query

More Query from same tag