Print styles not applied in production with webpack / react

1
votes

I am running a stack with rails, react on rails, and webpack. I am able to use print styles successfully in development, however when deploying to production it seems that none of the print styles apply.

In Development Proper Printing view

In Production. Production printing view

Only appears on production.

Possibly move towards PDF similar to other pages.

Style exists in production, not being applied properly?

In production it is able to find the media print styles. Printing styles applied from assets folder

Style in production @media print{.App-module__d-print-active-pdf___2FlpM{background-color:#fff;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;padding:15px;font-size:14px;line-height:18px}}

In Production. enter image description here

UPDATE:

Print styles are applied properly from the assets folder.

Print styles applied from assets folder

However they are not applied from the applications bundle. Not applied from applications bundle

1
ruby-on-railsreactjswebpackprinting

1 Answers

1
votes

If using webpacker, be sure to set the media type on your style tags:

So instead of:

<%= stylesheet_packs_with_chunks_tag 'styles-bundle' %>

You would want

<%= stylesheet_packs_with_chunks_tag 'styles-bundle', media: 'all' %>

If you'd like more info, the source for this can be helpful: