CSS style not loading when printing.

[rachitpant]

We moved several large applications from webpacker to vite and now have a hang of it. However with one of most recent app that we migrated , all of the app works great after migration exception one page. This page has a link that allows user to print it , with a simple call to window.print(); . However when the user clicks on the print button, the browser print preview popup is completely messed up. and it appears like the no css is not loaded in the print preview popup.

Here is a screenshot of the page , and the printpreview popup.

There are no errors in the console or network tab. And also this problem only happens when built in the production mode ( and not when the app is running in dev mode with a dev server ).

[ElMassimo]

By default, Rails uses media: 'screen' when rendering stylesheets, so Vite Ruby applies the same default for styles injected from a script.

Make sure to use media: 'all' when injecting the scripts or stylesheets if you want to apply those styles for print as well.

vite_javascript_tag 'application', media: 'all'
vite_stylesheet_tag 'styles.scss', media: 'all'

[rachitpant]

yeah thats exactly the problem , How can i do this if its an scss file . Right now its imported in App.vue as follows:

<style lang="scss">
@import url("stylesheets/ncaa.scss");
</style>

I tried removing it and adding it in application.html.erb as:
<%= vite_stylesheet_tag 'stylesheets/ncaa', media: 'all' %>

However i get an error:
Vite Ruby can't find stylesheets/ncaa.css in public/vite-dev/manifest.json or public/vite-dev/manifest-assets.json.

[ElMassimo]

If it's imported in App.vue, then you want to add media: 'all' to the vite_javascript_tag helper instead, as in the example above.

---

Regarding the last error, it happens because Vite will only build entrypoints, so you would need to move ncaa.scss to the entrypointsDir if you wanted to inject it separately. But there's no need to extract it in your use case.

[rachitpant]

Thank you @ElMassimo . That got it working. Might be a good idea to add this in the FAQs since others might also encounter this problem.