Reactjs global scss file for all variables/mixins etc

Question

I have a project with multiple components that are using scss.

I want to create a single file that stores all my variables and mixins globally that can then be used by any other scss file in my project. How is this possible without having to manually import the file into every scss file that i make?

I've tried making the index.css into a scss file and moved all my variables and mixins there. But nothing really changed. I'm currently using scss modules in my components. Is there perhaps a better way?

my folder structure

assets/
    sass/
        _variables.scss
        _mixins.scss

Components/
    .../
        componentName.js
        name.module.scss

index.css
index.js
App.js

Answer 1

All scss files you have need to be "connected" via an @import, if you want the least work, create a root directory and @import each file once, while making sure that the variables and mixins are imported before the other.

E.g.:

// utilities
@import 'utilities/variables', 'utilities/mixins';

//components
@import 'components/buttons', 'components/modals';