Global SASS variables in reactjs app

Question

Im currently learning reactjs and Ive just added SASS to my project. However, 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?

My folder structure:

/src assets/ images/

components/
    app/
        app.js
        app.scss

styles/
    scss/
        main.scss
        _var.scss
        _mixins.scss
        _typography.scss

index.css
index.js

monners monners · Accepted Answer · 2017-10-04T05:28:33

You'll have to import your variables at the top of a master import file, with all other imports coming after. So, assuming your directory structure above, in main.scss you'd want to do:

@import 'var';
@import 'mixins';
@import 'typography';

...

// Component imports
@import '../../components/app/app';

Alternatively, you could set up a shared master import file somewhere closer to the base of your project (say, index.scss), which would then look like:

// in `styles/scss/main.scss`
@import 'var';
@import 'mixins';
@import 'etc';

// in `index.scss`
// Base style import
@import 'styles/scss/main.scss';

// Component imports
@import 'components/app/app';
@import 'components/etc/etc';

The important factor here is that you need to be importing anything that needs access to your shared variables after your variable import. Otherwise the variables won't be in scope.

Global SASS variables in reactjs app

1 Answers