Search code examples
reactjscreate-react-app

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
enter image description here

Solution

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