Global scss variables in react-create-app

16
votes

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 this link

UPD
enter image description here

2
reactjsreact-create-app

2 Answers

10
votes

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.