React with WebpackでCSSファイルを構成する

Question

CSSファイルをどのように構造化できるかをよりよく理解したいと思います。私のフォルダ構造は次のようになります：

-app 
|-src 
||-components 
|||-app.js 
||-styles 
|||-styles.scss 
|-webpack.config 

私はapp.jsにインポートされ、他のコンポーネントにカスケードする1つのスタイルシートを持っています。しかし、より多くのコンポーネントを作成しているので、私のスタイルシートはかなり長くなっています。コンポーネントごとにスタイルシートを用意するのがベストプラクティスですか？また、webpackを使用して、スタイルシートをコンパイルしてCSSTファイルに展開し、index.htmlファイルにインポートします。私は複数のファイルがある場合、私はwebpackが1つのCSSファイルにそれらのすべてをコンパイルすると仮定していますか？

Answer 1

アプリケーションの規模が大きくなると、クラス名の衝突はもちろん、膨大なCSSファイルを維持することが難しくなります。そのため、ファイルの分離は一般的には良いアイデアです。 私は、ページごとにCSSファイルを選ぶことができます。 Webpackローダーについては、パイプとみなし、.cssで終わるすべてのファイルが入ってバンドルされるようにパイプを設定するので、複数のcssファイルがバンドルされます。