creact-react-app - How to import Sass variables to files

Question

I'm using create-react-app and I integrated Sass to it. It is compiling just fine, the issue is that if I create a variable or mixin, use it in one of my sass files and then close the localhost and comeback later and run npm start, it will give me an error, like this one:

The files are not recognizing the variables (mixin in this case), which is located in a file named "base.scss".

I also have an index.scss file where I import all my other .scss components:

@import "./styles/base.scss";
@import "./styles/layout.scss";
@import "./styles/components/search-bar.scss";
@import "./styles/components/side-nav.scss";
@import "./styles/components/phone-navigation.scss";
@import "./styles/components/card.scss";
@import "./styles/components/pagination.scss";
@import "./styles/components/dropdown.scss";
@import "./styles/components/dashboard.scss";
@import "./styles/components/cast.scss";

In the index.css file I can see the compiled code from all my .scss components, so it seems that it is working properly, I can see even the mixin in the compiled index.css file.

Jammar Jammar · Accepted Answer · 2020-07-07T13:22:43

Did you find an answer? I think in create-react-app you need to @import 'base' for every components.scss file, otherwise the variables are not found.

creact-react-app - How to import Sass variables to files

1 Answers