Moving Away from Sass: Merging CSS Files with Modern Tooling

Stu Robson has been documenting his efforts to gradually strip Sass out of his CSS workflow. His latest post focuses on one of the last remaining reasons many developers hold onto a preprocessor: merging multiple style files into a single output. Splitting styles into well-organized, individual files remains a popular practice, but the question is whether a Sass toolchain is still required to make that happen.

Robson highlights two viable approaches for developers who want to keep their file structure intact while dropping the Sass dependency: leveraging PostCSS or writing a custom Node.js script.

Using PostCSS for CSS Compilation

PostCSS is often thought of as a Sass companion, but it functions entirely independently. It integrates with standard build tools like webpack, Gulp, and Rollup, making it a straightforward addition to an existing development pipeline. As Robson notes, this makes it an easy way to start removing Sass without introducing configuration headaches:

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.

Writing a Custom Node.js Script

For a more minimal approach, Robson offers a custom Node.js script designed to combine CSS files directly. While it is not entirely dependency-free, it significantly reduces the overhead compared to a full preprocessor setup.

This particular script works best with a flat file directory structure. Developers who prefer nested subfolders may find it less suited to their needs. Robson acknowledges this trade-off:

With the flat file structure and single-level import strategy I employ, nested imports (you can do with postcss-import aren’t necessary for my project setup, simplifying the compilation process while maintaining clean organisation.

The benefit of the custom script is its simplicity A developer who wants to un-Sass their stylesheet management now has a clear path forward without abandoning the practice of separating concerns across multiple files.