webpacker: stylesheet_pack_tag not working [webpacker (3.0.0)]

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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (10 by maintainers)

Most upvoted comments

@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

+13

gauravtiwari on Sep 8, 2017

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.

+10

brentdodell on Sep 8, 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 on Sep 8, 2017