新增樣式表

此專案設定使用 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匯入，但如果你之後遷移到不同的建置工具，你可以隨時移除該匯入。