nunjucks fails with media queries in embedded

[mxeise]

I am getting an error for putting media queries in the embedded.scss. Any ideas how to solve this?

The error:
[14:33:24] Starting 'nunjucks'... [14:33:24] { Template render error: (unknown path) Template render error: (/Users/vl-test/Documents/mailings/src/templates/partials/header.nunjucks) Template render error: (/Users/vl-test/Documents/mailings/build/css/embedded.css) Error: expected end of comment, got end of file at Object.exports.prettifyError (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/lib.js:34:15) at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:489:31 at eval (eval at _compile (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:568:24), <anonymous>:18:11) at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:497:25 at eval (eval at _compile (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:568:24), <anonymous>:25:11) at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:23:23 at RawTask.call (/Users/vl-test/Documents/mailings/node_modules/asap/asap.js:40:19) at flush (/Users/vl-test/Documents/mailings/node_modules/asap/raw.js:50:29) at _combinedTickCallback (internal/process/next_tick.js:95:7) at process._tickCallback (internal/process/next_tick.js:161:9) plugin: 'gulp-nunjucks', showStack: false, name: 'Template render error', message: '(unknown path)\n Template render error: (/Users/vl-test/Documents/mailings/src/templates/partials/header.nunjucks)\n Template render error: (/Users/vl-test/Documents/mailings/build/css/embedded.css)\n Error: expected end of comment, got end of file', stack: 'Template render error: (unknown path)\n Template render error: (/Users/vl-test/Documents/mailings/src/templates/partials/header.nunjucks)\n Template render error: (/Users/vl-test/Documents/mailings/build/css/embedded.css)\n Error: expected end of comment, got end of file\n at Object.exports.prettifyError (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/lib.js:34:15)\n at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:489:31\n at eval (eval at _compile (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:568:24), <anonymous>:18:11)\n at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:497:25\n at eval (eval at _compile (/Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:568:24), <anonymous>:25:11)\n at /Users/vl-test/Documents/mailings/node_modules/nunjucks/src/environment.js:23:23\n at RawTask.call (/Users/vl-test/Documents/mailings/node_modules/asap/asap.js:40:19)\n at flush (/Users/vl-test/Documents/mailings/node_modules/asap/raw.js:50:29)\n at _combinedTickCallback (internal/process/next_tick.js:95:7)\n at process._tickCallback (internal/process/next_tick.js:161:9)', fileName: '/Users/vl-test/Documents/mailings/src/emails/index.nunjucks' }

Thanks in advance!

[longzheng]

I ran into this issue as well and figured out what was happening! It's actually caused by the generated CSS having the characters {# which is the nunjucks syntax for a comment. Hence the error is expecting an end comment syntax which is #}.

Basically you need to make sure you don't have any SCSS media query that has just an ID selector. For example, don't do

@media (max-width: 599px) {
   #template-body {

Instead do

@media (max-width: 599px) {
   table#template-body {