Compiling Multiple CSS Files into One | CSS-Tricks

"What I like about Stu's stab at this is that it's an ongoing journey rather than a wholesale switch. In fact, he's out with a new post that pokes specifically at compiling multiple CSS files into a single file. Splitting and organizing styles into separate files is definitely the reason I continue to Sass-ify my work. I love being able to find exactly what I need in a specific file and updating it without having to dig through a monolith of style rules."

"Ah, that's right, we can use PostCSS both with and without Sass. It's easy to forget that PostCSS and Sass are compatible, but not dependent on one another. postcss main.css -o output.css Stu explains why this could be a nice way to toe-dip into un-Sass'ing your work: PostCSS can seamlessly integrate with popular build tools like webpack, Gulp, and Rollup, allowing you to incorporate CSS compilation into your existing development workflow without potential, additional configuration headaches."

CSS has acquired many features that previously prompted use of Sass, reducing the necessity of a full Sass toolchain. Core conveniences like partialized files and modular organization remain valuable for maintainability and rapid updates. Multiple CSS files can be compiled into a single output using PostCSS or a custom Node.js script that reads and concatenates files via fs and path. PostCSS can run with or without Sass and integrates with build tools such as webpack, Gulp, and Rollup, fitting into existing workflows. A gradual migration away from Sass allows retention of file-splitting benefits while simplifying dependencies and build complexity.

Read at CSS-Tricks