Webpacker: stylesheet_pack_tag not working [webpacker (3.0.0)]

Created on 7 Sep 2017  路  22Comments  路  Source: rails/webpacker

This may be a config issue, or just not properly understanding webpack(er).

Some of our app will be based on React components, but at the moment, not all of it will. I've got the JS portion of react components working and I haven't added styles directly to those components yet, which I plan to.

My issue is that I would like to move all of our styles to Webpack, and out of the Asset Pipeline, but can't seem to get stylesheet_pack_tag to work with it. They do however get inlined when HMR is turned on.

I've got something like this...

- app
  - javascript
    - packs
      - CoreStyles.js
    - CoreStyles
      - styles
        - index.scss

// app/javascript/packs/CoreStyles.js
import 'CoreStyles/styles/index';

// I've also tried both of the following when the above didn't work
import 'CoreStyles/styles/index.scss';
import '../CoreStyles/styles/index';
import '~/CoreStyles/styles/index';

// app/javascript/CoreStyles/styles/index.scss
@import '~foundation-sites/scss/foundation';

// Import other files as well & setup core styles

<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag 'CoreStyles' %>
<%= javascript_pack_tag 'ReactComponents' %> <!-- (Another pack we have with just unstyled React components) -->

The react components work as expected, and I can see fonts referenced in the stylesheets being compiled by webpack...however, I'm not seeing any CSS/SCSS processed by webpack. The font files (.ttf, .woff, .eot, .svg) are only referenced inside app/javascript/CoreStyles/styles/index.scss, and those fonts show up in the manifest, however no CSS/SCSS files show up in the manifest.

picture brentdodell

Most helpful comment

@brentdodell That's looks alright since there is no index.html in the root. Have you tried changing the port to something else and then accessing through rails s? Usually, the error should be like this: Errno::ECONNREFUSED: Connection refused - connect(2) for 127.0.0.1:3035. Try changing your host from localhost to 0.0.0.0 in webpacker.yml

picture gauravtiwari on 8 Sep 2017
👍5 🎉3 ❤2 🚀1

All 22 comments

Output while running bin/webpack-dev-server:

            CoreStyles/fonts/MuseoSans_500_Italic-webfont-49906a65b6d6394fec634e4b0ddd322f.eot  20.1 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_100-webfont-2c209ca42697cf8dacffbee68be5316e.eot  18.9 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_100-webfont-2c5bc23a4637dc8ee22af5783d6472af.ttf  43.9 kB          [emitted]
                  CoreStyles/fonts/MuseoSans_100-webfont-ce5c9b4657f0902ef16bddac3b28d707.woff  21.7 kB          [emitted]
            CoreStyles/fonts/MuseoSans_100_Italic-webfont-a59d49936d57d1eb050a8f6290f8567a.eot  19.1 kB          [emitted]
            CoreStyles/fonts/MuseoSans_100_Italic-webfont-1ec1f92e542ef0cbc6feee73da6cd418.svg    85 kB          [emitted]
            CoreStyles/fonts/MuseoSans_100_Italic-webfont-2641e521c16564ac57fac6bd91d0ad63.ttf  45.1 kB          [emitted]
           CoreStyles/fonts/MuseoSans_100_Italic-webfont-21c3d9f9e3ba6ab98c4fc441c6a29338.woff  21.9 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_300-webfont-eec684f16a97b5f0d542141f75bc15d2.eot  19.1 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_300-webfont-95b19605e324dcc4be8412aab88ba35f.svg  82.1 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_300-webfont-31259986f155ac41f57d8cf296eb29e7.ttf  43.6 kB          [emitted]
                  CoreStyles/fonts/MuseoSans_300-webfont-e426545c123a5d9b07ff41c333a20b21.woff  21.9 kB          [emitted]
            CoreStyles/fonts/MuseoSans_300_Italic-webfont-85f9e1c525180cc2787c1c3aa324b349.eot  19.5 kB          [emitted]
            CoreStyles/fonts/MuseoSans_300_Italic-webfont-bbd5c00df0fb9153ad7fd36eb915cd6c.svg  87.3 kB          [emitted]
            CoreStyles/fonts/MuseoSans_300_Italic-webfont-25e2c9835a3056ff0ff58aa504efc789.ttf  45.5 kB          [emitted]
           CoreStyles/fonts/MuseoSans_300_Italic-webfont-1a7bb369bb3722d76596237bcb458edb.woff  22.3 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_500-webfont-0e80079d7cb316a32b5e1cd3a65612b2.eot  19.7 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_500-webfont-3a8fa2075258e6f0bcf158fd4133dddd.svg  80.7 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_500-webfont-5a724c91ba090320af0936f12d851eb0.ttf  45.3 kB          [emitted]
                  CoreStyles/fonts/MuseoSans_500-webfont-30733f4aa4f971fd7f095aa15c3fb404.woff  22.4 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_100-webfont-cf74b55776843df37160b006067a60b2.svg  80.7 kB          [emitted]
            CoreStyles/fonts/MuseoSans_500_Italic-webfont-4e8dddcba46176928da2336cf6dc9d22.svg    86 kB          [emitted]
            CoreStyles/fonts/MuseoSans_500_Italic-webfont-80028ced71fbe610ed9f8c806f4ecf7d.ttf  46.9 kB          [emitted]
           CoreStyles/fonts/MuseoSans_500_Italic-webfont-1d15a4a841b9d44b32c4c5683683b29f.woff  22.6 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_700-webfont-b469bc0808ab6a669d435c7e4ec188b4.eot    20 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_700-webfont-1c0796a0ca97e2f27a1d550eabf3bd0d.svg  82.1 kB          [emitted]
                   CoreStyles/fonts/MuseoSans_700-webfont-155e084a5af5cdc47683f41952f7fe26.ttf    46 kB          [emitted]
                  CoreStyles/fonts/MuseoSans_700-webfont-d59159846ab94fdd0f47d78e6493c981.woff  22.8 kB          [emitted]
            CoreStyles/fonts/MuseoSans_700_Italic-webfont-788914839e2bd940698a7173124c3743.eot  20.2 kB          [emitted]
            CoreStyles/fonts/MuseoSans_700_Italic-webfont-89968cba678409f322688111a4bb334c.svg  85.6 kB          [emitted]
            CoreStyles/fonts/MuseoSans_700_Italic-webfont-881d80707ae50fd8784aa68b3fb72a01.ttf  47.2 kB          [emitted]
           CoreStyles/fonts/MuseoSans_700_Italic-webfont-140985b2614fdc814bd1d13afedc090f.woff  22.8 kB          [emitted]
  _/_/node_modules/font-awesome/fonts/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
  _/_/node_modules/font-awesome/fonts/fontawesome-webfont-912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
  _/_/node_modules/font-awesome/fonts/fontawesome-webfont-b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
 _/_/node_modules/font-awesome/fonts/fontawesome-webfont-fee66e712a8a08eef5805a46892932ad.woff    98 kB          [emitted]
_/_/node_modules/font-awesome/fonts/fontawesome-webfont-af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
                                                               ReactComponents-0ec2513a7f13d810fbd8.js   6.3 MB       0  [emitted]  [big]  ReactComponents
                                                            CoreStyles-0ec2513a7f13d810fbd8.js  2.35 MB       1  [emitted]  [big]  CoreStyles
                                                                                 manifest.json   5.5 kB          [emitted]
brentdodell picture brentdodell on 8 Sep 2017

manifest.json

{
  "CoreStyles.js": "/packs/CoreStyles-0ec2513a7f13d810fbd8.js",
  "CoreStyles/fonts/MuseoSans_100-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_100-webfont-2c209ca42697cf8dacffbee68be5316e.eot",
  "CoreStyles/fonts/MuseoSans_100-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_100-webfont-cf74b55776843df37160b006067a60b2.svg",
  "CoreStyles/fonts/MuseoSans_100-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_100-webfont-2c5bc23a4637dc8ee22af5783d6472af.ttf",
  "CoreStyles/fonts/MuseoSans_100-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_100-webfont-ce5c9b4657f0902ef16bddac3b28d707.woff",
  "CoreStyles/fonts/MuseoSans_100_Italic-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_100_Italic-webfont-a59d49936d57d1eb050a8f6290f8567a.eot",
  "CoreStyles/fonts/MuseoSans_100_Italic-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_100_Italic-webfont-1ec1f92e542ef0cbc6feee73da6cd418.svg",
  "CoreStyles/fonts/MuseoSans_100_Italic-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_100_Italic-webfont-2641e521c16564ac57fac6bd91d0ad63.ttf",
  "CoreStyles/fonts/MuseoSans_100_Italic-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_100_Italic-webfont-21c3d9f9e3ba6ab98c4fc441c6a29338.woff",
  "CoreStyles/fonts/MuseoSans_300-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_300-webfont-eec684f16a97b5f0d542141f75bc15d2.eot",
  "CoreStyles/fonts/MuseoSans_300-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_300-webfont-95b19605e324dcc4be8412aab88ba35f.svg",
  "CoreStyles/fonts/MuseoSans_300-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_300-webfont-31259986f155ac41f57d8cf296eb29e7.ttf",
  "CoreStyles/fonts/MuseoSans_300-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_300-webfont-e426545c123a5d9b07ff41c333a20b21.woff",
  "CoreStyles/fonts/MuseoSans_300_Italic-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_300_Italic-webfont-85f9e1c525180cc2787c1c3aa324b349.eot",
  "CoreStyles/fonts/MuseoSans_300_Italic-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_300_Italic-webfont-bbd5c00df0fb9153ad7fd36eb915cd6c.svg",
  "CoreStyles/fonts/MuseoSans_300_Italic-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_300_Italic-webfont-25e2c9835a3056ff0ff58aa504efc789.ttf",
  "CoreStyles/fonts/MuseoSans_300_Italic-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_300_Italic-webfont-1a7bb369bb3722d76596237bcb458edb.woff",
  "CoreStyles/fonts/MuseoSans_500-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_500-webfont-0e80079d7cb316a32b5e1cd3a65612b2.eot",
  "CoreStyles/fonts/MuseoSans_500-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_500-webfont-3a8fa2075258e6f0bcf158fd4133dddd.svg",
  "CoreStyles/fonts/MuseoSans_500-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_500-webfont-5a724c91ba090320af0936f12d851eb0.ttf",
  "CoreStyles/fonts/MuseoSans_500-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_500-webfont-30733f4aa4f971fd7f095aa15c3fb404.woff",
  "CoreStyles/fonts/MuseoSans_500_Italic-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_500_Italic-webfont-49906a65b6d6394fec634e4b0ddd322f.eot",
  "CoreStyles/fonts/MuseoSans_500_Italic-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_500_Italic-webfont-4e8dddcba46176928da2336cf6dc9d22.svg",
  "CoreStyles/fonts/MuseoSans_500_Italic-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_500_Italic-webfont-80028ced71fbe610ed9f8c806f4ecf7d.ttf",
  "CoreStyles/fonts/MuseoSans_500_Italic-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_500_Italic-webfont-1d15a4a841b9d44b32c4c5683683b29f.woff",
  "CoreStyles/fonts/MuseoSans_700-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_700-webfont-b469bc0808ab6a669d435c7e4ec188b4.eot",
  "CoreStyles/fonts/MuseoSans_700-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_700-webfont-1c0796a0ca97e2f27a1d550eabf3bd0d.svg",
  "CoreStyles/fonts/MuseoSans_700-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_700-webfont-155e084a5af5cdc47683f41952f7fe26.ttf",
  "CoreStyles/fonts/MuseoSans_700-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_700-webfont-d59159846ab94fdd0f47d78e6493c981.woff",
  "CoreStyles/fonts/MuseoSans_700_Italic-webfont.eot": "/packs/CoreStyles/fonts/MuseoSans_700_Italic-webfont-788914839e2bd940698a7173124c3743.eot",
  "CoreStyles/fonts/MuseoSans_700_Italic-webfont.svg": "/packs/CoreStyles/fonts/MuseoSans_700_Italic-webfont-89968cba678409f322688111a4bb334c.svg",
  "CoreStyles/fonts/MuseoSans_700_Italic-webfont.ttf": "/packs/CoreStyles/fonts/MuseoSans_700_Italic-webfont-881d80707ae50fd8784aa68b3fb72a01.ttf",
  "CoreStyles/fonts/MuseoSans_700_Italic-webfont.woff": "/packs/CoreStyles/fonts/MuseoSans_700_Italic-webfont-140985b2614fdc814bd1d13afedc090f.woff",
  "_/_/node_modules/font-awesome/fonts/fontawesome-webfont.eot": "/packs/_/_/node_modules/font-awesome/fonts/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot",
  "_/_/node_modules/font-awesome/fonts/fontawesome-webfont.svg": "/packs/_/_/node_modules/font-awesome/fonts/fontawesome-webfont-912ec66d7572ff821749319396470bde.svg",
  "_/_/node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "/packs/_/_/node_modules/font-awesome/fonts/fontawesome-webfont-b06871f281fee6b241d60582ae9369b9.ttf",
  "_/_/node_modules/font-awesome/fonts/fontawesome-webfont.woff": "/packs/_/_/node_modules/font-awesome/fonts/fontawesome-webfont-fee66e712a8a08eef5805a46892932ad.woff",
  "_/_/node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "/packs/_/_/node_modules/font-awesome/fonts/fontawesome-webfont-af7ae505a9eed503f8b8e6982036873e.woff2",
  "ReactComponents.js": "/packs/ReactComponents-0ec2513a7f13d810fbd8.js"
}
brentdodell picture brentdodell on 8 Sep 2017

It appears that stylesheet_pack_tag only throws an error when HMR is enabled. Surely we wouldn't have to conditionalize our call to stylesheet_pack_tag, right?

brentdodell picture brentdodell on 8 Sep 2017

@brentdodell When HMR is on the styles are inlined within the bundle so you won't get any css bundle. Are you using dev server?

https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb#L52

gauravtiwari picture gauravtiwari on 8 Sep 2017
👍1

@brentdodell Also, have you updated webpacker and config to 3.0.x?

gauravtiwari picture gauravtiwari on 8 Sep 2017

I have updated to 3.0.1, which should be the current.

I tried using webpack-dev-server, but got the following error:
#<Errno::ECONNREFUSED: Failed to open TCP connection to localhost:3035 (Connection refused - connect(2) for "::1" port 3035)>

The webpack-dev-server does run, and appears to compile things, but I get that error in the output from rails s when I try to load the page.

brentdodell picture brentdodell on 8 Sep 2017

@brentdodell Is your config/webpacker.yml current? The upgrade requires to run bundle exec rails webpacker:install.

gauravtiwari picture gauravtiwari on 8 Sep 2017

Yes @gauravtiwari, no changes are made to it when I run that task.

brentdodell picture brentdodell on 8 Sep 2017

Thanks, sorry I am just trying to investigate with you. And the dev server is surely listening on localhost:3035?

gauravtiwari picture gauravtiwari on 8 Sep 2017

Thanks, sorry I am just trying to investigate with you.

Thank you. I appreciate it very much!

image

brentdodell picture brentdodell on 8 Sep 2017

@brentdodell Right that's strange :) And you can access the dev server from browser by visiting localhost:3035?

gauravtiwari picture gauravtiwari on 8 Sep 2017

@brentdodell Right that's strange :) And you can access the dev server from browser by visiting localhost:3035?

Hmmm...I didn't realize it should be browsable in the browser. This is what I get:
image

brentdodell picture brentdodell on 8 Sep 2017

@brentdodell That's looks alright since there is no index.html in the root. Have you tried changing the port to something else and then accessing through rails s? Usually, the error should be like this: Errno::ECONNREFUSED: Connection refused - connect(2) for 127.0.0.1:3035. Try changing your host from localhost to 0.0.0.0 in webpacker.yml

gauravtiwari picture gauravtiwari on 8 Sep 2017
👍5 🎉3 ❤2 🚀1

OK, so it appears that changing localhost to either 127.0.0.1, or 0.0.0.0 in my webpacker.yml file fixes the error mentioned above.

It seems like the styles that are inlined are being truncated though. It appears that very few styles show up in the inlined <style> tag, and very few styles are applied to the page.

brentdodell picture brentdodell on 8 Sep 2017
❤6 👍2

It seems like the styles that are inlined are being truncated though. It appears that very few styles show up in the