search

rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

stylesheet_pack_tag not working [webpacker (3.0.0)] #772

Closed brentdodell closed 7 years ago

brentdodell commented 7 years ago

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.

brentdodell commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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?

gauravtiwari commented 7 years ago

@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 commented 7 years ago

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

brentdodell commented 7 years ago

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.

gauravtiwari commented 7 years ago

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

brentdodell commented 7 years ago

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

gauravtiwari commented 7 years ago

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

brentdodell commented 7 years ago

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

Thank you. I appreciate it very much!

image

gauravtiwari commented 7 years ago

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

brentdodell commented 7 years ago

@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

gauravtiwari commented 7 years ago

@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

brentdodell commented 7 years ago

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.

gauravtiwari commented 7 years ago

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