Webpacker: stylesheet_pack_tag not working in webpacker 4??

Created on 17 Apr 2019  路  21Comments  路  Source: rails/webpacker

based on the usage mention here, _you can link them by using stylesheet_pack_tag_ which mean you add <%= stylesheet_pack_tag 'application' %> under views>layout>application.html.erb

but then when I view-source the web, there is no css loaded inside the <head>.

then to fixed this issue, i need to import import '../src/application.css' into packs/application.js to make the css file to work and load.

my question, is this how it should work? if so, what is the purpose to have <%= stylesheet_pack_tag 'application' %>? if you commented out this line, it is still work.

I have create the sample app for better picture about this

or maybe i miss some point somewhere else?

style loaders support
Source
picture AmirolAhmad
👍20

Most helpful comment

This sounds to me like misunderstanding how webpack works (which is reasonable, because it's incredibly confusing).

Webpack is used for building many things, and the way we tell webpack what to load are import or require statements. This includes css files, images, and everything else. When you do import '../src/application.css', you're telling webpack include application.css in the build. This does not mean it's going to be compiled into your javascript, only that webpack now knows that you want to compile this file. How that file compilation is handled is depending on how your loaders (css-loader, sass-loader, file-loader, etc.. ) are configured.

When you do <%= stylesheet_pack_tag 'application' %>, that's a run-time inclusion from Rails, that has nothing to do with whether webpack has built the stylesheets or not. All that is doing is saying "if you have a pack named application-*.css, include it here". If webpack didn't build a separate pack of css, then this statement will have nothing to load because no stylesheets were compiled.

You didn't mention what framework you're using, and how this works is dependent on that. As far as I remember, stylesheet_pack_tag is only used for Vue because vue-loader automatically collects all of the stylesheets into one file. I am not sure if any other frameworks require this (I don't think React does, for example).

It is perfectly normal and expected to import or require your stylesheets like you're doing in your entry point file.

picture bbugh on 25 Apr 2019
👍38 ❤5

All 21 comments

having the same issue.

hishammalik picture hishammalik on 19 Apr 2019

This sounds to me like misunderstanding how webpack works (which is reasonable, because it's incredibly confusing).

Webpack is used for building many things, and the way we tell webpack what to load are import or require statements. This includes css files, images, and everything else. When you do import '../src/application.css', you're telling webpack include application.css in the build. This does not mean it's going to be compiled into your javascript, only that webpack now knows that you want to compile this file. How that file compilation is handled is depending on how your loaders (css-loader, sass-loader, file-loader, etc.. ) are configured.

When you do <%= stylesheet_pack_tag 'application' %>, that's a run-time inclusion from Rails, that has nothing to do with whether webpack has built the stylesheets or not. All that is doing is saying "if you have a pack named application-*.css, include it here". If webpack didn't build a separate pack of css, then this statement will have nothing to load because no stylesheets were compiled.

You didn't mention what framework you're using, and how this works is dependent on that. As far as I remember, stylesheet_pack_tag is only used for Vue because vue-loader automatically collects all of the stylesheets into one file. I am not sure if any other frameworks require this (I don't think React does, for example).

It is perfectly normal and expected to import or require your stylesheets like you're doing in your entry point file.

bbugh picture bbugh on 25 Apr 2019
👍38 ❤5

I saw that its covered in the document as

If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.

However, the problem I've observed with this is that if you have stylesheet_pack_tag in your layout as a default, but your javascript doesn't spit out any styles, then you will run into an error on live where rails complains about stylesheet not existing.

This should be consistent for dev and production environment. As in, if error is to be generated on production for no stylesheet generated, then development should also give the error.

hishammalik picture hishammalik on 25 Apr 2019
👍10

@bbugh And yeah, maybe because I missing a loader in the app, so it doesn't compile my scss file. BTW, thanks for your input.

AmirolAhmad picture AmirolAhmad on 25 Apr 2019

From https://github.com/rails/webpacker/issues/2062#issuecomment-484942469

The build chain works like this:

(if extract_css == true) -> application stylesheet -> MiniCssExtractPlugin -> application.css -> stylesheet_pack_tag 'application'

(if extract_css == false) -> application stylesheet -> style-loader -> application.js (loads css in head)

MiniCssExtractPlugin does not support webpack-dev-server or HMR. statement from dev: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/296#issuecomment-430679174

Good news time: a PR was just merged for this feature https://github.com/webpack-contrib/mini-css-extract-plugin/pull/334, but it won't come to webpacker unless somebody creates a PR here.

jakeNiemiec picture jakeNiemiec on 25 Apr 2019
👀3 👍3

still not working stylesheet_pack_tag any updates?

upd.
i have manifest.json file which contents

"entrypoints": {
    "forms/login": {
      "css": [
        "/packs/css/forms/login-c851d7b1.css"
      ],

in my template i have:

= stylesheet_pack_tag 'forms/login' // not working
= javascript_pack_tag 'forms/login' // working
mrsum picture mrsum on 11 Jul 2019

For what it's worth, I've noticed that while stylesheet_pack_tag does not render anything in development, it does render a css file in production.

My guess is that this is due to the extract_css setting in config/webpacker.yml.

eronisko picture eronisko on 27 Jul 2019
👍17 ❤3 🚀2

@eronisko when you are in development (depending on settings), the styles are being streamed in via WebSocket and injected into the <head>.

jakeNiemiec picture jakeNiemiec on 29 Jul 2019
👍1

So what is the conclusion here?

I'm using webpacker with react and, by importing the scss in my packs/*.js, the styles work...in development. When I deployed to production, I realized there are no styles available.

Do I need to add stylesheet_pack_tag for it to work in production?

I think it would be better if I'd receive any error at any point.

I've also checked https://github.com/rails/webpacker/blob/master/docs/css.md and many other issues. Maybe this should be clarified more?

EDIT: I got it working in production by doing stylesheet_pack_tag 'index', the same as the js file that includes the scss file.
Here's the full solution:

// app/javascript/packs/index.js
import '../scss/index'; // this is index.scss file

// app/views/home/index.html.erb
<%= stylesheet_pack_tag 'index' %>
<%= javascript_pack_tag 'index' %>

I'm not sure if the scss file name matters. I think what matters is that stylesheet_pack_tag includes the same name like the js file name index.js.

vfonic picture vfonic on 6 Aug 2019
👍6 👀2

When I deployed to production, I realized there are no styles available.

You probably have extract_css: true in your webpacker.yml. This removes import '../scss/index'; and generates the equivalent style sheet. You _do_ need to add stylesheet_pack_tag yourself.

jakeNiemiec picture jakeNiemiec on 6 Aug 2019
🎉2 ❤1

@jakeNiemiec

@eronisko when you are in development (depending on settings), the styles are being streamed in via WebSocket and injected into the <head>.

What does this and/or how is this configured?

HarrisonB picture HarrisonB on 20 Aug 2019

See this updated comment where I spell out both ways it can go: https://github.com/rails/webpacker/issues/2059#issuecomment-486709736

streamed in via WebSocket

When webpack-dev-server is running (depending on HMR/dynamic loading settings), your chunks come over a socket allowing faster development. It can be sometimes difficult to set up.

injected into the <head>

This is handled via style-loader. Customization: https://github.com/webpack-contrib/style-loader#options

jakeNiemiec picture jakeNiemiec on 21 Aug 2019

@jakeNiemiec Thank you very much for your comment!

So if I understand it correctly, there's currently no way to have the CSS in the head without some client-side JS execution?

HarrisonB picture HarrisonB on 21 Aug 2019

So if I understand it correctly, there's currently no way to have the CSS in the head without some client-side JS execution?

It is possible, just do the following and it should work in a default install:

  1. extract_css: true
  2. Put <%= stylesheet_pack_tag 'myStylePack' %> in <head>

Here is the mechanism:

https://github.com/rails/webpacker/blob/41d79c96187154b5485289e8c3c42428dd819bfc/package/utils/get_style_rule.js#L40-L44

jakeNiemiec picture jakeNiemiec on 21 Aug 2019

@jakeNiemiec Sorry, I was unclear. That would include a <link> tag in the <head> referencing a separate CSS file. However, if I were to want a <style> tag with the CSS as a child text node, I cannot achieve that via Webpacker (without client-side JS execution)?

HarrisonB picture HarrisonB on 22 Aug 2019
👀1

@HarrisonB if I were to want a