添加样式表

此项目设置使用 webpack 来处理所有资产。 webpack 提供了一种 “extending” 的自定义方式，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 所必需的，但很多人觉得这个功能很方便。 你可以阅读此方法的好处 here。 但是，你应该意识到，与 webpack 相比，这会降低你的代码对其他构建工具和环境的可移植性。

在开发中，以这种方式表达依赖关系允许你的样式在你编辑它们时即时重新加载。 在生产中，所有 CSS 文件将在构建输出中连接成一个缩小的 .css 文件。

如果你担心使用特定于 webpack 的语义，你可以将所有 CSS 直接放入 src/index.css。 它仍然会从 src/index.js 导入，但如果你稍后迁移到不同的构建工具，你始终可以删除该导入。