スタイルシートの追加

このプロジェクトのセットアップでは、すべての資産を処理するためにwebpackを利用しています。webpackでは、JavaScript以外のimportのコンセプトを「拡張」する独自の手段が提供されています。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からインポートされますが、後で別のビルドツールに移行する場合は、常にそのインポートを削除できます。