jamesvphan jamesvphan - 3 years ago 180
CSS Question

Structuring CSS files in React with Webpack

I'd like to get a better understanding on how I can structure my css files. My folder structure is like so:

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


So I have one stylesheet that will be imported into app.js and cascade to my other components. But as I'm creating more components, my stylesheet is getting pretty long. Is it best practice to have stylesheets per component? Also, I'm using webpack to compile and extract my stylesheet into a css file to import into index.html file. If I have multiple files, I'm assuming webpack will compile all of them into one css file?

Answer Source

When your application scales it becomes hard to maintain a huge CSS file , not to mention class name collision , so files separation its generally a good idea. I prefer CSS file per page , kind of up to you how to separate them. As for webpack loaders , think of it as a pipe , the pipe sets rule that every file that ends with .css comes in and bundled, so yea , it will bundle multiple css files.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download