CSS and webpack
Explore techniques for incorporating CSS and SCSS into Rails applications with Webpacker. Understand how to import stylesheets, manage static assets like images, and utilize tools such as PostCSS for processing. This lesson provides practical methods to organize and load CSS efficiently for richer frontend development.
We'll cover the following...
Building CSS in webpack
In this lesson, we’re going to focus on using CSS in webpack.
For more details on exactly what our tools do when we load them, see Webpacker.
Initially, CSS was a little tricky to load from Webpacker, but there have been continual improvements and it’s now about the same complexity as using Sprockets.
The default Webpacker setup allows us to use plain CSS as well as Sass and SCSS. Sass and SCSS are valuable extensions to basic CSS, including an easier syntax for variables and nested selectors. The SCSS version of the syntax is very similar to the original CSS, while Sass is a minimalist syntax that is similar to Haml. We’ll be using SCSS for examples in the book, though I expect that most of them will also work as plain CSS.
If you look at our codebase so far, we’ve been using the Bulma CSS framework, but we’ve been importing it directly in our layout using a direct link in our application.html.erb layout file. Now we’re going to import the Bulma CSS framework via Webpacker.
Bulma can be imported as a node module: ...