How to style email template in magento2?

Question

How to style email template? I want to override email variable value and change style according without element inline style used. Is there possible to complie email's less files with grunt.

How to compile email style?

Answer 1

Please follow below step to compile email.less

1. copy _email-extend.less folder from vendor/magento/theme-frontend-blank/web/css/source/_email-extend.less and put under app/design/frontend/vendor(packagename)/your-theme(custom theme)/web/css/source/

2. open root/dev/tools/grunt/configs/theme.js and put following code in it (configure your theme in theme.js)

    theme: {
    area: 'frontend',
    name: 'vendor/your-theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'css/email',
        'css/email-inline',            

    ],
    dsl: 'less'

1. Clean root/var/ and pub/static folder.
2. Run grunt exec:theme (your-theme)
3. Run php bin/magento setup:static-content:deploy
4. Run grunt watch:theme (your-theme)
5. Modify "_email-extend.less", now it is compile through grunt.

Answer 2

If you want the non-inline style I can recommend reading this article and paragraph Magento 2 Dev Docs

If you want the non-inline styles to work, then these must be in a <style type="text/css"></style> tag for them to work. You need to make sure the {{template config_path="design/email/header_template"}} or the code below is in your email template.

<style type="text/css">
    {{var template_styles|raw}}
</style>

UPDATE Sorry misunderstood your question, this link should help you for this Magento Dev Docs Grunt