CSS and webpack

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 in Development.

Initially, it was tricky to load CSS from Webpacker, but there have been continual improvements, and it’s now about as simple as using SprocketsSprockets is a Ruby library for compiling and serving web assets. .

Webpacker allows us to add support for CSS, and CSS processors like PostCSS, and CSS variant languages like 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 similar to the original CSS, while Sass is a minimalist syntax that is similar to HAMLHaml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code.. We’ll be using SCSS for examples in the course, though most of them will also work as plain CSS as well.