添加样式表

此项目设置使用 webpack 来处理所有资源。webpack 提供了一种自定义的方式来“扩展”import的概念，使其超越 JavaScript。为了表达 JavaScript 文件依赖于 CSS 文件，你需要 **从 JavaScript 文件中导入 CSS**

Button.css

.Button {
  padding: 20px;
}

Button.js

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

**这对于 React 来说不是必需的**，但许多人发现此功能很方便。你可以阅读有关此方法优势的更多信息 这里。但是，你应该知道，这会使你的代码比 webpack 更难移植到其他构建工具和环境中。

在开发过程中，以这种方式表达依赖关系允许您在编辑样式时动态重新加载它们。在生产环境中，所有 CSS 文件将被合并到构建输出中的单个压缩 .css 文件中。

如果您担心使用 webpack 特定的语义，您可以将所有 CSS 直接放入 src/index.css 中。它仍然会从 src/index.js 中导入，但如果您以后迁移到其他构建工具，您可以随时删除该导入。