small medium large xlarge

1378470_10201594379893417_697049378_n_pragsmall
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.

Dmfcb_pragsmall
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.

1378470_10201594379893417_697049378_n_pragsmall
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 github.io I’ve tried to mimic some of the examples.

require("style-loader!./application.css");

webpack compiles this. If I include css-loader like

require("style-loader!css-loader!./application.css");

or

require("css-loader!./application.css");

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.

Dmfcb_pragsmall
20 Apr 2017, 20:26
David Copeland (382 posts)

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

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

It is up there. seehad/cltshine2

Generic-user-small
21 Apr 2017, 20:49
Mark Fowler (14 posts)

Guys,

/rails/webpacker#linking-to-static-assets on github.com 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

Dmfcb_pragsmall
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']
}
1378470_10201594379893417_697049378_n_pragsmall
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.

1378470_10201594379893417_697049378_n_pragsmall
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.

Generic-user-small
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

require('./application.css');

Using Rails 5.1.0.rc2

You must be logged in to comment