magento 2.1.9 - email templates css

Question

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?

Answer 1

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.

Answer 2

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