Coming Soon: SASS support and more

bep · July 1, 2018, 10:45pm

bep · July 3, 2018, 7:19am

/cc @regis

I was pleasently surprised to test this and it … just worked.

regis · July 3, 2018, 10:45am

This is going the “check solved” many threads! Thanks for making this a very near future reality.

bep · July 3, 2018, 5:16pm

Hey gang,

You have a final chance to look at all the new functions coming and suggest some final adjustments – or just look:

bep · July 4, 2018, 9:07pm

I managed to find a way to get LiveReload “hot reloading” working for these assets changes. This avoids browser reloads and makes it lot snappier. I will probably only enable in “fast render mode” (because it requires hashing of the published content to detect changes). I will test a little more, but it is very very cool. Works wonder for images, CSS (that can be built from SCSS) and JS.

RickCogley · July 5, 2018, 12:12am

wow, fantastic!

rdwatters · July 5, 2018, 1:21am

This new feature set just keeps getting better and better! I can’t wait to install and give it a test run!

bep · July 6, 2018, 10:11am

Oh my …

Leo_Merkel · July 6, 2018, 11:38am

Alexa: Drum roll!

matt_paz · July 6, 2018, 1:44pm

This is awesome! Quick question tho, where do you set the EnableSourceMap boolean?

bep · July 6, 2018, 1:48pm

github.com

bep/hugo-sass-test/blob/master/layouts/_default/baseof.html#L9


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hugo bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  {{ if .Site.IsServer }}
  {{ $cssOpts := (dict "targetPath" "styles/main.css" "enableSourceMap" true ) }}
  {{ $styles := resources.Get "scss/main.scss" | toCSS $cssOpts }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
  {{ else }}
  {{ $cssOpts := (dict "targetPath" "styles/main.css" ) }}
  {{ $styles := resources.Get "scss/main.scss" | toCSS $cssOpts | postCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
  {{ end }}
  <script>
  </script>
</head>

matt_paz · July 6, 2018, 2:27pm

Perfect. Thanks!

holehan · July 6, 2018, 2:28pm

I just had to give it a try on my mac and android phone (aarch64). The hugo install process gave me the same two wellington/go-libsass warnings on both systems, but it worked nonetheless. I tested only a few simple things (toCSS | minify | fingerprint). Serving and reloading is as fast as one would expect . I am really looking forward to not having to use nodesass anymore.

bep · July 6, 2018, 2:30pm

Yes, those are known. I will look into that, but I have used this extensively the last few weeks and have had no SASS-related issues.

regis · July 6, 2018, 5:41pm

I’m on v0.43-DEV darwin/amd64 but get this error when using toCSS
failed to transform resource: failed to transform "sass/main.scss" (text/x-scss): this feature is not available in your current Hugo version

I guess I need help It is mentionned needing a C compiler, but I thought it was only when building from source.

bep · July 6, 2018, 5:45pm

There is no relase builds, so you, by definition, have to build it from source … or get a binary from someone who built it from source.

If you have XCode installed (which would give you the C compiler), try:

HUGO_BUILD_TAGS=extended mage install

If you still have problems, send me a PM.

RickCogley · July 7, 2018, 1:07am

Eureka! It works.

Had a bit of a struggle to get everything compiling and linking, but, it appears to basically be working fine now.

Super!

I can set the $moo variable in _customvars.scss and boom, it updates the site.
I can see how changing the Hugo Pipes pipeline in baseof.html works to change how the css is compiled and minified etc.

Really cool.

pamubay · July 7, 2018, 7:24am

already tested from the source, well i must say this is AMAZING

my favorite thing actually resources.FromString combined with resources.Concat
really nice, now i can output anything i want

Thanks to @bep and all contributors

bep · July 7, 2018, 8:08am

I added that mainly to make it easier to write tests for all of this … but I assumed it was going to be useful for some.

lucperkins · July 7, 2018, 8:15am

I refactored the website for my recent book to use the new version:

I pulled up @bep’s example project, spent about 5 minutes working on syntax, and I was good to go. Love at first sight. Bam.

PS: Hugo + Netlify + Bulma CSS is fucking deadly, y’all.

Topic		Replies	Views
Best practice on static asset bundling support	5	983	June 19, 2017
How to integrate a theme's assets to a pipeline? support	1	437	July 17, 2019
Hugo server not rebundling and reloading Sass/SCSS when files are changed support assets	2	1027	August 23, 2021
Hugo pipes - SCSS not re-compiling on server or watch support	11	8223	October 30, 2020
Attempting to add SASS, but resource <nil> support	3	965	February 22, 2021

Coming Soon: SASS support and more

Related topics