SASS：未渲染index.js中导入的scss（使用create-react-app）

Question

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; }

Answer 1

You will need this line instead

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

NOT

import './style/index.scss';