Convert SCSS to CSS and then inline?

Is there any way to convert SCSS to CSS and then inline it on the page? I’ve tried:

  <head>
    {{- partial "head.html" . -}}
    {{ $sass := resources.Get "scss/site.scss" }}
    {{ $sass | safeCSS }}   
  </head>

But it doesn’t seem to output any CSS, only:

Resource(x-scss: scss/site.scss)

Any advice?

Try this:

{{ $style := resources.Get "scss/site.scss" | resources.ToCSS }}
{{ $style.Content }}
1 Like

How do you wrap style tags around this? Currently your answer is correct, except it doens’t produce style tags. But if I wrap style tags around it it doesn’t produce anything except: <style>ZgotmplZ</style>

Following works fine :slight_smile:

<style type="text/css">{{ (resources.Get "scss/site.scss" | toCSS).Content | safeCSS }}</style>
5 Likes

That was helpful!

Small improvement:
<style>{{ (resources.Get "scss/site.scss" | toCSS | minify ).Content | safeCSS }}</style>

type="text/css" ain’t necessary, but minification is nice.

1 Like

This topic was automatically closed after 22 hours. New replies are no longer allowed.