How to add style rules to print.css

Question

In M2 they use custom .media-width mixin rules to add to styles-m.css or styles-l.css.

//
// Common
// _____________________________________________
& when (@media-common = true) {
 .catalog-product-view {
 }
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
}
//
// Desktop
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
}

Is there a similar method for adding style rules to print.css?

• Manoj Deswal: Yes you can use similar way, but extend your print.less and keep original file , you can make addition but do not remove original styles.

Answer 1

print.less file is used for print styles:

vendor/magento/theme-frontend-blank/web/css/print.less

So you should just need to extend/overwrite this file in your theme.

More info found on the dev docs here - http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html

Answer 2

If you use a custom theme you can go to the theme's path:

app/design/frontend/YourVendorName/YourThemeName/web/css and do a file called print.less.

Into that file copy and paste the content from this file: vendor/magento/theme-frontend-blank/web/css/print.less.

After that add the style changes that you want to do in app/design/frontend/YourVendorName/YourThemeName/web/css/print.less and then run this command:

php bin/magento setup:static-content:deploy

I hope this helps.

• Ben Crook: The static-content deploy command is only required when running in production mode btw.
• Corgalore: I'm running in developer mode and the print.less in my theme doesn't get processed unless I run deploy : (
• Abrar Pathan: Solution is not working