Menu icon Foundation
Best way to inline custom styles

I'm looking into learning about the finer points of the email framework. Currently, I'm trying to set up some custom styles. I've placed my stylesheet inside the, ./src/layouts/default.html file. Once I run,

    npm run build

The styles are included in the files produced in, ./dist, but they aren't inlined - they're just included with the rest of the content in default.html.

Should I just be adding my own styles to, ./src/assets/scss/_settings.scss?

 

Somewhat related, after a file is inlined, the produced HTML still has the following line in its head tag:

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

Is this required for proper rendering? Or are the inlined styles from this rendered file good enough?

 

inlining

I'm looking into learning about the finer points of the email framework. Currently, I'm trying to set up some custom styles. I've placed my stylesheet inside the, ./src/layouts/default.html file. Once I run,

    npm run build

The styles are included in the files produced in, ./dist, but they aren't inlined - they're just included with the rest of the content in default.html.

Should I just be adding my own styles to, ./src/assets/scss/_settings.scss?

 

Somewhat related, after a file is inlined, the produced HTML still has the following line in its head tag:

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

Is this required for proper rendering? Or are the inlined styles from this rendered file good enough?

 

Evan Wiegand almost 3 years ago

You custom styles should go inside ./src/assets/scss/app.scss. You can type them directly inside the bottom of that file, or load your own custom partials using @import "my-partial-name".

And no, you don't need that linked app.css file in your final inlined version. To get rid of the link line, add "removeLinkTags: true" in your gulpfile.babel.js file, last line shown here:

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,
      removeLinkTags: true
    })

 

Justin J almost 3 years ago

Thanks, Evan!