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).

UPD
Global scss variables in create-react-app

Answers:

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
_colors.scss
_links.scss
_basics.scss

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


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

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x