Webpacker: stylesheet_pack_tag and javascript_pack_tag reference the same file

[andrewcsmith]

I have two files (application.js, application.sass) in app/javascript/packs, and so my layout has both <%= stylesheet_pack_tag 'application' %> and <%= javascript_pack_tag 'application' %>. Unfortunately, it seems that webpacker 2.0 (Rails 5.1.2) is trying to load application.sass twice, and totally ignoring application.js. This issue is solved by just naming them something like styles.sass and app.js, but the current behavior is still not what I would have expected.

I would have expected stylesheet_pack_tag to find only stylesheets, and javascript_pack_tag to find only javascript, or at least to have an error/warning message somewhere.

[gauravtiwari]

@andrewcsmith packs is a special directory meant only for entry files i.e. written either in JS, Coffee or TS (as long as it compiles to JS). Every other thing should be outside packs and may live under app/javascript or anywhere you wish to be as long as you can reference it. If you reference styles in your pack all styles will be extracted to [pack_name].css, which you can reference in your views - https://github.com/rails/webpacker#inside-views

// example
// packs/app.js
import '../styles/main.sass'
import '../../assets/stylesheets/main.sass'

[andrewcsmith]

Got it, makes sense now - so I can still use application_pack_tag and stylesheet_pack_tag with the same name, but just have to compile all the sass and js (say, for bootstrap w/ overrides) into a single js file.

Chalk this up to confusion, then. I should mention I skipped lots of the "build a React component" sections, because I'm mostly using webpacker to serve assets like bootstrap and all that. I'm going to open a quick PR for a language edit in README that I think could help (for those of us without so much JS app experience).

[gauravtiwari]

@andrewcsmith It's javascript_pack_tag and stylesheet_pack_tag where stylesheet_pack_tag is only necessary if you have styles included within your component otherwise styles won't be referenced.

Sure 👍 if you are just using bootstrap and not react or es6 or modern JS stuff from npm then it would be makes sense to stick to sprockets - simpler to use.

[charusat09]

thanks @gauravtiwari for clarification between stylesheet_pack_tag and javascript_pack_tag