Menu icon Foundation
Email remains linked to app.css stylesheet

Hello,

I'm using SASS to build some emails with Foundation. I previously was very successful, and created another project which has this one error:

After running:

foundation new --framework emails
npm start

and styling my email, then running:

npm run build

the /dist folder is filled with the latest changes. That newly compiled index.html, however, still has this in the header:

<link rel="stylesheet" type="text/css" href="css/app.css">

When importing to Zoho, Zoho obviously doesn't like this, because that .css isn't available. I could of course just delete that link, then import to Zoho, but shouldn't the

npm run build

remove the link to the stylesheet as it inlines all the styles for the email?

Thank you!

Sassapp.cssinliningbuildemail

Hello,

I'm using SASS to build some emails with Foundation. I previously was very successful, and created another project which has this one error:

After running:

foundation new --framework emails
npm start

and styling my email, then running:

npm run build

the /dist folder is filled with the latest changes. That newly compiled index.html, however, still has this in the header:

<link rel="stylesheet" type="text/css" href="css/app.css">

When importing to Zoho, Zoho obviously doesn't like this, because that .css isn't available. I could of course just delete that link, then import to Zoho, but shouldn't the

npm run build

remove the link to the stylesheet as it inlines all the styles for the email?

Thank you!

This post has been closed. No new replies can be added.

Dan Newman over 3 years ago

Aha -- checked out my gulpfile.babel.js:

function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,
      removeLinkTags: false
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });

  return pipe();
}

and noticed the

      removeStyleTags: false,
      removeLinkTags: false

deleting those did as promised, and the new dist/index.html is without it's dependency and link to css/app.css.