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


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: [

    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.

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}}

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


Your Answer

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

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