magento2,email,css,email-templates,order-email – Fixing CSS Minification Breaking Email CSS in Magento 2

cssemailemail-templatesmagento2order-email

Some of the css in email is broken after I enabled minification of css. I assume the reason being this :

email.css and email-inline.css are called from email header i.e header.html

But when I enable minification and deploy content, I dont see email.css and email-inline.css files instead I see their minified version as email.min.css and email-inline.min.css respectively.

So I tried to resolve the issue by renaming the calling in header.html.
It dint help.

Then I copied the minifiled files and renamed them to .css files
That also dint help.

What do u think might be the issue ?

UPDATE:

I have used inline css overall the email template. The css is broken for the Order Details in Order Confirmation email, return email etc.
The Order Details comes from an xml internally calling a phtml file.

{{layout handle="sales_email_order_items" order=$order area="frontend"}}

Internally it calls items.phtml. I can not add inline css to this phtml file as this file is being used in frontend as well on order view page where the item details are rendered.
How Can I take care of these sections in emails so that the css is not broken?

Email without minified css:

Email with minified css(broken css)

UPDATE:

I have now added css in the header.html in style tag and removed call to email-inline.css and email.css. When I view the email in outlook or gmail the css is still broken. However If I open the mail in browser(View in browser) the section looks fine.

Best Answer

As Sejal said, the recommended way is to use Magento 2 less files which is processed by Emogrifier.

The problem is that Magento 2 did not upgrade this library in composer.

I faced on this issue too and found a workaround :

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.

Moreover, I faced on this issue when I set production mode and not developer mode which enabled minification by default.

Latest Emogrifier release : https://github.com/jjriv/emogrifier/releases

Related Solutions

Magento – Magento2 – Override Template order summary in sales email order

the block referenced by sales.email.order.renderers.default is the one to override the template

both layout definitions below should do the work and the first layout definition is now deprecated:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="sales.email.order.renderers.default">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Mbs_EmailSaleOverride::sales_item.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

below is the new notation to take over the block template:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="sales.email.order.renderers.default">
            <arguments>
                <argument name="template" xsi:type="string">Mbs_EmailSaleOverride::sales_item.phtml</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now, the emails in Magento are more complex than normal pages and I have today written a plugin that takes over the function getTemplate for the block \Magento\Sales\Block\Order\Email\Items\Order\DefaultOrder and this is finally successfully overriding the template as expected:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Sales\Block\Order\Email\Items\Order\DefaultOrder">
        <plugin name="takeovertemplate" type="Mbs\EmailSaleOverride\Plugin\OrderItemDefaultRenderer" />
    </type>
</config>

<?php
namespace Mbs\EmailSaleOverride\Plugin;

class OrderItemDefaultRenderer
{
    public function testafterGetTemplate()
    {
        return 'Mbs_EmailSaleOverride::sales_item.phtml';
    }
}

Magento2 – Not Minifying JS, CSS or HTML in Production Mode

After a lot of struggling with this, i've finally found the issue.

I dived into the magento 2 source code to try and decipher how it decides when to minify files.

I discovered that even though our magento mode was set to production in the ENV file, the mode inside the vendor/magento/framework/App/State.php file still returned developer for some reason.

After going through the stack trace i finally found that we have a MAGE_MODE declaration set to developer inside our .htaccess file. As soon as I changed this to production, the minification started working (remember to restart apache to read the modified .htaccess file).

In conclusion, if anyone else faces this issue, make sure you are not setting the MAGE_MODE variable to developer inside your .htaccess file. Even if you override this value in all other sections of magento 2, some parts of magento 2 will still initialize under developer mode.

NOTE for NGINX users

You'll need to add it to your config as NGINX doesn't read .htaccess files. fastcgi_param MAGE_MODE production; Or, better yet, omit it entirely and set it via bin/magento deploy:mode:set production.

Thanks @kirkmadera for the NGINX comment.

Hope this saves someone out there some time.

Best Answer

Related Solutions

Magento – Magento2 – Override Template order summary in sales email order

Magento2 – Not Minifying JS, CSS or HTML in Production Mode

Related Topic