React app - how to import Sass mixin?

#1

I configured create-react-app to add Sass by following the guide on this link here, oddly enough when I visit the link I don’t the guide any more.

In any case, everything works smoothly but when I try to run the app with npm start I get an error.

37%20PM
37%20PM1078×688 106 KB

This is happening because of a Sass mixin, I had a similar situation when I tried to use a Sass variable so I had to remove it, but in this case I can’t afford to remove the mixin from my files. Does anybody know why is this happening, I can’t see to find any documentation on the issue.

edit: I know now this is happening because the mixin is not importing to all files.

#2

By the way CRA now is augmented : React blog: CRA 2.0
To use sass you only need to install node-sass and that’s all, you can directly import .scss files into components!

#3

Oh I see, I also found this documentation here. I already installed Sass, the issue is that whenever I try to run npm start it’ll give me an error because it’s not recognizing Sass variables/mixins through all the files.

#4

Which version of create-react-app are you using? IIRC, v2 makes it a lot easier to incorporate sass and similar pre-processors

#5

How can I determine which version I currently have?

#6

Ok I checked and I read how to upgrade to version 2.0, however here it says that the command to install Sass is npm install node-sass --save, I am not sure if this is the documentation for CRA 2.0. In the link that you sent I couldn’t see anything about how to install Sass.

Another thing, I already installed Sass in my app as per the old version of CRA, so what’s going to happen to that?

#7

The link i posted is the blog post related to the release of version 2.0, the link you posted is the updated doc :slight_smile:

Anyway there’s no particular needs to update from 1.x to 2.x, it was just a news related to your problem (in your next project you can avoid such config problems^^): to solve your actual issue well, it seems you’re not importing the .scss file with the mixin declaration^^

#8

I am importing the file with the mixin declaration. In my index.scss file is where I import all my .scss files:

@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";

The mixin is located in the base.scss file. And as I mentioned the import seems to be working because I can see the mixin in the compiled index.css file. The issue with the mixin is to start the server, so to get around this I have to comment out the mixin in all my components and run npm start, then uncomment them all out again, I can see the changes in the live server, meaning that it’s working.

#9