diff --git a/assets/scss/hugo-tufte.scss b/assets/scss/hugo-tufte.scss
index 27cb552..aa7334d 100644
--- a/assets/scss/hugo-tufte.scss
+++ b/assets/scss/hugo-tufte.scss
@@ -15,3 +15,9 @@
 @import "components/header";
 @import "components/meta";
 
+// Look at this https://gohugo.io/hugo-pipes/resource-from-template/#readout
+{{ if and (isset .Site.Params "codeblocksdark") .Site.Params.codeBlocksDark  }}
+@import "syntax/highlight-dark.scss"
+{{ else }}
+@import "syntax/highlight-light.scss"
+{{ end }}
\ No newline at end of file
diff --git a/assets/scss/highlight-dark.scss b/assets/scss/syntax/highlight-dark.scss
similarity index 83%
rename from assets/scss/highlight-dark.scss
rename to assets/scss/syntax/highlight-dark.scss
index e31ab70..1016174 100644
--- a/assets/scss/highlight-dark.scss
+++ b/assets/scss/syntax/highlight-dark.scss
@@ -1,6 +1,6 @@
 $ht-code-bgcolor: #282a36;
 
-@import "syntax/syntax-dark.scss";
+@import "syntax-dark.scss";
 
 .highlight {
     &::-webkit-scrollbar {
diff --git a/assets/scss/highlight-light.scss b/assets/scss/syntax/highlight-light.scss
similarity index 83%
rename from assets/scss/highlight-light.scss
rename to assets/scss/syntax/highlight-light.scss
index 772c046..5a1303d 100644
--- a/assets/scss/highlight-light.scss
+++ b/assets/scss/syntax/highlight-light.scss
@@ -1,6 +1,6 @@
 $ht-code-bgcolor: #dde2ff;
 
-@import "syntax/syntax-light.scss";
+@import "syntax-light.scss";
 
 .highlight {
     &::-webkit-scrollbar {
diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html
index bde71dd..2d3a379 100644
--- a/layouts/partials/header.includes.html
+++ b/layouts/partials/header.includes.html
@@ -17,21 +17,8 @@
 
 <script defer src="{{ "/js/main.js" | relURL }}"></script>
 
-<!-- Main CSS file based on Pure blog layout -->
-{{ if and (isset .Site.Params "codeblocksdark") .Site.Params.codeBlocksDark  }}
-    {{ $codeoptions := (dict "targetPath" "/css/highlight-dark.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
-    {{ $style := resources.Get "scss/highlight-dark.scss" | resources.ToCSS $codeoptions }}
-    
-    <link rel="stylesheet" href="{{ $style.Permalink | relURL }}">
-{{ else }}
-    {{ $codeoptions := (dict "targetPath" "/css/highlight-light.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
-    {{ $codestyle := resources.Get "scss/highlight-light.scss" | resources.ToCSS $codeoptions }}
-
-    <link rel="stylesheet" href="{{ $codestyle.Permalink | relURL }}">
-{{ end }}
-
 {{ $htoptions := (dict "targetPath" "/css/hugo-tufte.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
-{{ $htstyle := resources.Get "scss/hugo-tufte.scss" | resources.ToCSS $htoptions }}
+{{ $htstyle := resources.Get "scss/hugo-tufte.scss"| resources.ExecuteAsTemplate "main.scss" .  | resources.ToCSS $htoptions }}
 <link rel="stylesheet" href="{{ $htstyle.Permalink | relURL }}">
 
 <link rel="stylesheet" href="{{ "/css/hugo-tufte-override.css" | relURL }}">