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 (382 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 (382 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 (382 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 (4 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

You must be logged in to comment