2

so I after I created my custom theme and applied it, the emails are coming but there is no CSS styling on them. I don't want to make any changes to them, I am happy to keep the default ones. any ideas what's happening?

Thanks in advance!

Update: so i ran bin/magento setup:static-content:deploy and i found this error:

    Compilation from source: /Applications/MAMP/htdocs/Magento219/vendor/magento/theme-frontend-blank/web/css/email-inline.less

Compilation from source: 
frontend/mageroot/dbooks/en_US/css/email-inline.less
variable @media-common is undefined in file /Applications/MAMP/htdocs/Magento219/var/view_preprocessed/css/frontend/mageroot/dbooks/en_US/css/source/_theme.less in _theme.less on line 4, column 9
2| //  _____________________________________________
3| 
4| & when (@media-common = true) {
5| .page-header {
6|     margin-top: 0px;
7|     margin-bottom: 0px;

....

Compilation from source: /Applications/MAMP/htdocs/Magento219/vendor/magento/theme-frontend-blank/web/css/print.less

Compilation from source: 
frontend/mageroot/dbooks/en_US/css/print.less
variable @media-common is undefined in file /Applications/MAMP/htdocs/Magento219/var/view_preprocessed/css/frontend/mageroot/dbooks/en_US/css/source/_theme.less in _theme.less on line 4, column 9
2| //  _____________________________________________
3| 
4| & when (@media-common = true) {
5| .page-header {
6|     margin-top: 0px;
7|     margin-bottom: 0px;

I am not sure is it the error that causes this and I am not sure how to sort it out anyway. any thoughts?

2

right, so i found the solution:

for the error above i added these lines in my _theme.less file in my custom theme:

@import (reference) "../source/lib/variables/_responsive.less";
@import (reference) "../source/lib/_responsive.less";

for the problem with the css: i copied the _email-extend.less and _email-variables.less files from the luma theme. also, I copied the _variables.less file from the blank theme (if you have custom breakpoints you need to add those to this file as well) and after all this, I have the default/luma email template css, and if I want to change it, I only need to change the css code in the _email-extend.less

I hope that will help someone to not waste time looking for this.

0

Please remove added your css on theme.less see below

 & when (@media-common = true) {
     .page-header {
        margin-top: 0px;
       margin-bottom: 0px;

you have to add inline css for email template

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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