Magento 2: Override/extend the email.css that is being used in the transactional email header
You can check the official documentation here : http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html
The general steps :
- Create a Magento 2 frontend theme
- Upload your custom logo here :
app/design/frontend/Vendor/Theme/Magento_Email/web/logo_email.png - Edit the header and footer parts here :
app/design/frontend/Vendor/Theme/Magento_Email/email/header.htmlandapp/design/frontend/Vendor/Theme/Magento_Email/email/footer.html - Edit the sales email templates for example here :
app/design/frontend/Vendor/Theme/Magento_Sales/email/order_new.html - Add your custom styles here for common emails :
app/design/frontend/Vendor/Theme/web/css/source/_email-extend.less - Add your custom less variables here for common emails :
app/design/frontend/Vendor/Theme/web/css/source/_email-variables.less - Add your custom styles here for sales emails :
app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less
And the final step is to upgrade the Magento 2 Emogrifier library in order to fix bugs with inline css generation.
Update your root composer.json and add this require line :
"pelago/emogrifier": "1.2.0 as 0.1.1"
Then do a composer update and your mail css should be working.