Global scss variables in create-react-app

In my src folder, I have assets/styles folder where my global scss files are.

In my index.scss I import them like this

@import 'assets/styles/colors.scss';
@import 'assets/styles/links.scss';
@import 'assets/styles/basics.scss';

And then in index.js, I import compiled index.css

Problem: In basics.scss I’m using variable from colors.scss and getting an error Undefined variable: "$black".

And the same happens in components scss files if they use variables from that file. I really don’t want to import colors in every single component. Is there a way to make these 3 files global?

To work with scss in reacting I’m using Adding a CSS Preprocessor (Sass, Less etc.) (Since moved here).

Global scss variables in create-react-app


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Use partials when importing parts into index.scss

@import 'assets/styles/colors';
@import 'assets/styles/links';
@import 'assets/styles/basics';

The filenames should be

You can read more about this in the SASS docs under the Partial section.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x