Use Dart Sass

.gitignore

@@ -1,6 +1,7 @@
 /public/
 /resources/
 
+*.css
 *.css.map
 *.scss.map
 

azure-pipelines.yml

@@ -18,19 +18,39 @@ jobs:
     clean: all
   timeoutInMinutes: 2
   variables:
-    hugo_download_url: https://github.com/gohugoio/hugo/releases/download/v0.59.1/hugo_extended_0.59.1_Linux-64bit.tar.gz
+    hugo_download_url: https://github.com/gohugoio/hugo/releases/download/v0.59.1/hugo_0.59.1_Linux-64bit.tar.gz
     hugo_archive: hugo.tar.gz
     hugo_build_path: $(System.DefaultWorkingDirectory)/$(artifact_name)
+    sass_download_url: https://github.com/sass/dart-sass/releases/download/1.26.3/dart-sass-1.26.3-linux-x64.tar.gz
+    sass_archive: sass.tar.gz
+    sass_directory: $(hugo_build_path)/style
   steps:
   - bash: |
+      echo Downloading Hugo
       wget --output-document $(hugo_archive) --tries 3 --no-verbose $(hugo_download_url)
       tar -xzvf $(hugo_archive) hugo
       rm $(hugo_archive)
-      ./hugo version
+      echo Hugo `./hugo version`
   - bash: |
+      echo Running Hugo
       ./hugo --destination $(hugo_build_path) --environment production --cleanDestinationDir --gc --ignoreCache --log --minify --noChmod
       echo "Files and folders generated by Hugo:"
       ls $(hugo_build_path)
+  - bash: |
+      echo Downloading Sass
+      wget --output-document $(sass_archive) --tries 3 --no-verbose $(sass_download_url)
+      tar --extract --gzip --verbose --file $(sass_archive)
+      mv dart-sass/* ./
+      rm $(sass_archive)
+      rm --dir dart-sass
+      echo Sass `./sass --version`
+  - bash: |
+      echo Running Sass
+      ./sass $(sass_directory):$(sass_directory) --style=compressed --no-source-map --stop-on-error
+  - bash: |
+      rm $(sass_directory)/*.scss
+      echo "Files generated by Sass:"
+      ls $(sass_directory)
   - publish: $(hugo_build_path)
     artifact: $(artifact_name)
 

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
     {{ hugo.Generator }}
     {{ block "meta" . }} {{ end }}
 
-    {{ partial "scssLink" "style/style.scss" }}
+    {{ partial "scssLink" "style" }}
     {{ block "includes" . }} {{ end }}
 </head>
 

layouts/about/section.html

@@ -1,5 +1,5 @@
 {{ define "includes" }}
-{{ partial "scssLink" "style/about.scss" }}
+{{ partial "scssLink" "about" }}
 {{ end }}
 
 {{ define "main" }}

layouts/about/single.html

@@ -1,5 +1,5 @@
 {{ define "includes" }}
-{{ partial "scssLink" "style/about.scss" }}
+{{ partial "scssLink" "about" }}
 {{ end }}
 
 {{ define "main" }}

layouts/articles/single.html

@@ -5,7 +5,7 @@
 {{ end }}
 
 {{ define "includes" }}
-{{ partial "scssLink" "style/article.scss" }}
+{{ partial "scssLink" "article" }}
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css">
 {{ end }}
 

layouts/index.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "includes" }}
-{{ partial "scssLink" "style/index.scss" }}
+{{ partial "scssLink" "index" }}
 {{ end }}
 
 {{ define "main" }}

layouts/partials/scssLink.html

@@ -1,4 +1,2 @@
-{{ $options := dict "outputStyle" "compressed" "enableSourceMap" true }}
-{{ $style := resources.Get . | resources.ToCSS $options }}
-{{ $fingerprinted := $style | resources.Fingerprint "sha384" }}
-<link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}" integrity="{{ $fingerprinted.Data.Integrity }}">
+{{ $href := print "style/" . ".css" | urlize | relURL }}
+<link rel="stylesheet" type="text/css" href="{{ $href }}">

layouts/resources/section.html

@@ -1,5 +1,5 @@
 {{ define "includes" }}
-{{ partial "scssLink" "style/resources.scss" }}
+{{ partial "scssLink" "resources" }}
 {{ end }}
 
 {{ define "main" }}