SASS：在 index.js 中导入的 scss 不呈现（使用 create-react-app）

Question

我正在开发一个 create-react-app 项目，我使用以下说明将 SASS 连接到该项目：https://github.com/facebook/create-react-app

然后，在我的源代码中，我创建了一个样式文件夹，其中包含一个 partials 文件夹和一个 index.scss。在 partials 文件夹中，我有一个 firstComponent.scss 文件。我将第一个组件文件中的 scss 导入到我的 index.scss 中。样式已成功导入我的 index.css 文件。但是，它们不会在浏览器上呈现。为什么是这样？

这是我的 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();

这是我的 index.scss

@import './partials/_firstComponent';  

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

这是我的 firstComponent.scss

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

这是我的 index.css

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

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

Answer 1

你将需要这条线

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

不是

导入'./style/index.scss';