Global scss variables in create-react-app

Question

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

Roy Scheffers · Accepted Answer · 2018-08-12 09:33:08Z

12

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.

answered Aug 12, 2018 at 9:33

Roy Scheffers

3,90611 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Person Over a year ago

Ok, did that. But when I try to use $black in my App.scss file I'm still getting Undefined variable. Although now it works in basics.scss

Roy Scheffers Over a year ago

Can you show what your tree structure is? It might be that you are not importing things correctly.

Person Over a year ago

Updated the question

Roy Scheffers Over a year ago

Thanks Allan. Make sure to import App.scss as well into index.scss. Placing the general style files (containing vars) at the top and component partials below it. Here's an example. It's a project of mine where I import several vars and component styles into an app. GitHub repo

Person Over a year ago

Ok, I think I fixed it. The problem was that I had index.scss, where I imported all scss files and which I later improted to index.js. I just removed index.scss and did all of it inside App.scss and it is all working now. Thanks!

Collectives™ on Stack Overflow

Global scss variables in create-react-app

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related