Modern Front-End Development for Rails

Adding CSS and Assets to webpack

You might want to use a lot of static file assets via Webpacker, such as images or fonts, in your code or CSS. To get those assets into our pack file we have to import them, and then Webpacker gives us some helper methods to be able to access the files. We need helper methods here because bundling the images into the pack changes the name of the file, so we can’t just use the raw file name.

First we need to import the static files. To do so, we need to add the following code to our application.js. This code is boilerplate from the Webpacker gem, which I removed along the way; we can put it back now:

chapter_05/01/app/packs/entrypoints/application.js

const images = require.context("../images", true)