After production build, styles of pdf are broken.

[pmw1407]

Hello again, when I build my project to production, pdf styles are broken.

I'm using Vite as my project builder.

I think it's css problem, are there any options to maintain my css styles in production mode?

[MatthewHerbst]

Hello. reat-to-print doesn't remove or change any of your CSS styles. Most likely your production styles have a @media print query in them that is changing the styles. I'm happy to help debug if you could make a codesandbox or similar with your code (minimal reproduction is ideal). Thanks!

[pmw1407]

Sorry for my late reply, I was trying to configure what the problem is, and I guess that Vite production builder does not support media query

@page {
    size: auto;
    margin: 0mm 5mm 0mm 5mm;
}

which is the pageStyle props that react-to-print provide.

I think that's the default of pageStyle props, I wonder how can I get rid of this media query.

[MatthewHerbst]

Hmm. I find it very hard to believe that Vite doesn't support media queries: they are standard CSS that are built into the browser and don't need any transforms to work. Can you share the documentation where you found that please?

The default styles just removing the header and footer from the page that the browser puts on, it doesn't impact your styles otherwise. You can remove it by passing an empty pageStyle="" prop.

[pmw1407]

Thanks for your fast reply.

I didn't look at any documentation, it was just my guess and I was wrong. Media query doesn't affect to this problem.

I really have no idea why this is happening, I guess I should learn and study more about all of these.

Do you have any Vite production environment? If you do, I can give you vite config file of my project.

Any advice would be really thankful and if you don't have time for this problem, it would be totally okay.

Thanks for your reply.

[MatthewHerbst]

The issue you are describing is almost certainly a CSS problem, and not an issue with your build tools. If you could give a link to the website, or put the code into codesandbox or similar, that would be very helpful to help debug the CSS

[pmw1407]

Thanks for your help, but I just decided to replace css files as style props of the html elements.

Since I don't have much time for the deadline, I should figure it out later of these problems.

Thanks for your help!

[MatthewHerbst]

Ok. If you do want to come back to this at another time please feel free to post about it, happy to help debug.

[newjan]

I ran into the same issue after I migrated an existing rails project from webpacker to vite. This project had react component that used react-to-print. I solved the issue by adding media: 'all' to the vite stylesheet import tag in application.html.erb.

<%= vite_stylesheet_tag 'application', media: 'all' %>

Just adding so that it maybe helpful to someone