css - 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 文件。我将 firstComponent 文件中的 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';