7

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?

2 Answers 2

10

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.
1
  • It's working fine. Great Work!!!! Commented Apr 17, 2018 at 10:45
1

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

4
  • I want to compile _email-variables.less and _email-extend.less compile with grunt. how can i do that ? Commented Jan 12, 2017 at 4:51
  • Did you have a look at this one devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/…
    – seb
    Commented Jan 12, 2017 at 8:03
  • I know how to compile with grunt but, these two file are not compile with grunt. Commented Jan 12, 2017 at 8:45
  • The files are even mentioned there so I don´t get why these wouldn´t get compiled in your case
    – seb
    Commented Jan 12, 2017 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.