Serving CSS via Webpack

Overview of CSS stylesheets

We’ve been writing CSS in files located in app/assets/stylesheets. Rails will find whatever .css files are there, bundle them all up together, and make the combined CSS available to your views. If we want to use modern CSS tools or techniques, such as CSS modules or Post CSS, it’s not possible to do so with the default configuration Rails provides.

The part of Rails that handles CSS is called Sprockets, and while new gems are always being produced to give Sprockets new abilities, the state of the art in CSS is part of the JavaScript ecosystem and available via Webpack. In earlier versions of Rails, setting up Webpack was extremely difficult. However, as we learned in ...