SASS: imported scss in index.js not rendering (using create-react-app)

0
votes

I'm working on a create-react-app project, which I hooked SASS to, using these instructions: https://github.com/facebook/create-react-app

Then, in my source, I created a style folder with a partials folder and an index.scss. Inside the partials folder, I have a firstComponent.scss file. I imported the scss from the firstComponent file into my index.scss. The styles are being successfully imported into my index.css file. However, they are not being rendered on the browser. Why is this?

here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './style/index.scss';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

here is my index.scss

@import './partials/_firstComponent';  

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

here is my firstComponent.scss

.firstComponent {
    background-color: 'red'; 
}

here is my index.css

.firstComponent {
  background-color: 'red'; }

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; }
1
cssreactjssass
Try using import './style/index.css'; instead of import './style/index.scss'; - Chetan Jadhav CD
You need to install sass-loader and configure webpack to load it. - Hoyen
but I don't want to eject from create-react-app, and the instructions i followed on the create-react-app github don't specify the need for a sass-loader :/ - user74843
I tried to use import './style/index.css', but it's still the same I'm afraid.. - user74843
oh! It's working all of a sudden.. because I changed import './style/index.scss' to './style/index.css' I guess, but why didn't the styles render correctly straight away?? Thank you, though!! - user74843

1 Answers

0
votes

You will need this line instead

require('./style/index.scss');

NOT

import './style/index.scss';