small medium large xlarge

19 Apr 2017, 17:46
Chad Tipton (14 posts)

I created my shine app with rails 5.1.0.rc1. My shared.js looks nothing like the book. From the looks of it 5.1 moved the loaders into config/webpack/loaders so perhaps I don’t need to enter the css and font loader lines into shared.js. However, moving on from that point and testing that I have Webpack configured, the page never switches to using a monospaced font.

19 Apr 2017, 18:22
David Copeland (427 posts)

Yeah, they changed it right after we published the beta. It’ll be corrected before the final.

You can look at the Gemfile.lock in the downloaded code if you want to revert to an older Webpacker that matches the book.

If you don’t see the monospace font, it means it’s not picking up something correctly. If you import "./application.css" without the loader configured, webpack should blow up, so if it’s not, it could mean you don’t have the style-loader configured—that will inject a <style> tag into your page at runtime.

20 Apr 2017, 17:40
Chad Tipton (14 posts)

I’m at a loss as to where to go to research whether I have the style-loader configured and, if not, what I would need to do to get it configured. At the configuration page for webpack at I’ve tried to mimic some of the examples.


webpack compiles this. If I include css-loader like




webpack will not compile.

Don’t spend very much time on this. I’d be ecstatic if you could just point me in a direction.

20 Apr 2017, 20:26
David Copeland (427 posts)

Can you post your work-in-progress app up on GitHub?

21 Apr 2017, 15:20
Chad Tipton (14 posts)

It is up there. seehad/cltshine2

21 Apr 2017, 20:49
Mark Fowler (14 posts)


/rails/webpacker#linking-to-static-assets on says “Static assets like images, fonts and stylesheets support is enabled out-of-box…” and advises the <%= stylesheet_pack_tag %> helper (in our application.html.erb).

I also am on 5.1.0.rc1, and my shared.js is the new version (not like the book).

Along with the fact that the css- and style- loaders were already in my yarn.lock file, that worked for me to see the mono-spaced font. I did still need to require the .css file in application.js

21 Apr 2017, 21:34
David Copeland (427 posts)

Ugh. I hope this stabilizes soon.

I think you have to create something like config/webpack/loaders/css.js like:

module.exports = {
  test: /\.css$/i,
  use: ['style-loader', 'css-loader']
25 Apr 2017, 00:14
Chad Tipton (14 posts)

I started over with rc2 of rails. I skipped the shared.js part but did have to add the <%= stylesheet_pack_tag 'application' %> for it to work.

25 Apr 2017, 00:17
Chad Tipton (14 posts)

I created the project using rails new shine3 --skip-turbolinks --skip-spring --skip-test --webpack=angular -d postgresql

We’ll see if that helps or hinders when I get to adding angular.

26 Apr 2017, 02:34
steve fox (9 posts)

Adding the new stylesheet helper worked for me, too.

<%= stylesheet_pack_tag 'application' %>

Don’t forget to ‘require’ application.css in app/javascript/packs/application.js, though


Using Rails 5.1.0.rc2

02 Jun 2017, 09:56
Ralf Niedling (1 post)

I’m using Rails 5.1.1

Short summary of my steps:

  • setup project like rails new day-x --skip-turbolinks --skip-spring --skip-test --webpack=angular

  • skipped the webpacker installation as it was already done by the –webpack parameter

  • skipped the installation of css-loader and style-loader as they are also already installed by the –webpack parameter. Only did yarn add url-loader file-loader

The config/webpack/shared.js looks different from what’s in the book. As I understand the configs are now in the config/webpack/loaders folder.

As the conifg/webpack/loaders/sass.js file already includes a test for css files, I skipped this part of the configuration mentioned in the book.

The part with the font handling I put as config/webpack/loaders/bootstrap.js like:

module.exports = {
  test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
  loader: 'url-loader'

This is where I stopped at the moment.

Is this a proper solution to go on with the book?

I also need to add

<%= stylesheet_pack_tag 'application' %>

to get the stylesheet loaded.

Another thing that really puzzles me is the fact that I need to put the application.css file in the javascript (app/javascript/packs) folder.

Isn’t there a better way?

02 Jun 2017, 13:12
David Copeland (427 posts)

Your steps are very close to the revisions that are coming out in the next final release. I just submitted changes for review and the beta should be updated in he next week or so. They changed a lot. But it is ultimately much easier on setup so the finished product should be good. Sorry it’s taken a while—the JS ecosystem is poorly designed, opaque, and unforgiving in its masking of errors.

You must be logged in to comment