Why create-react-app cant find my Sass variables

Question

I create react app with create-react-app and setup the file structure like that:

src/
 -index.js
 -main.scss
 pages/
  -somepage.js
  -somepage.scss
 styles/
  -_variables.scss

index.js

import './main.scss';
...

main.scss

@import './styles/variables.scss';

_variables.scss

 $primary: #000;

somepage.js

import somepage.scss

somepage.scss

selector {
 property: $primary; <-- sass can't find that
}

Any ideas please? Thank you.

Answer 1

You need this...

npm install node-sass

https://www.npmjs.com/package/node-sass

Can you try this ?

Answer 2

@import './styles/variables';
@import './pages/somepage';

You could import all stylesheets in your main.scss and then all you need is import './main.scss'; in index.js. You also don't have to to specify the suffix.

Finding the File