Are asset pipelines working on Netlify for anyone?

My Hugo site works locally, but not on Netlify… I have an environment variable for Hugo 0.44 BTW. I also tried adding a netlify.toml file and that doesn’t work either. My repo is on GitLab but I also tried GitHub and had the same result.

4:46:46 PM: Installing Hugo 0.44
4:46:54 PM: Started restoring cached go cache
4:46:54 PM: Finished restoring cached go cache
4:46:54 PM: unset GOOS;
4:46:54 PM: unset GOARCH;
4:46:54 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
4:46:54 PM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
4:46:54 PM: go version >&2;
4:46:54 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
4:46:54 PM: go version go1.10 linux/amd64
4:46:54 PM: Installing missing commands
4:46:54 PM: Verify run directory
4:46:54 PM: Executing user command: hugo
4:46:54 PM: Building sites …
4:46:54 PM: ERROR 2018/07/15 20:46:54 error: failed to transform resource: TOCSS: failed to transform "scss/main.scss" (text/x-scss): this feature is not available in your current Hugo version

This is the Hugo code I’m using. My site builds fine on Netlify if I remove this.

{{ 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 }}" media="screen">
    {{ else }}
    {{ $cssOpts := (dict "targetPath" "styles/main.css" ) }}
    {{ $styles := resources.Get "scss/main.scss" | toCSS $cssOpts | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
  {{ end }}

You currently need to commit the content below /resources for it to work. But they are working on getting the “extended Hugo” version installed as the default. Not sure when. You need to ask them about it.

My resources folder looks like: resources/gen/assets/scss/scss/main.scss(fingerprint I’m guessing).content and the same filename with .json

I’ve committed those but it still doesn’t build on Netlify, it’s still trying to run TOCSS.

Is there a command that will create CSS files I can commit? I’ve read the release threads and my understanding is building the SCSS files every time the site is updated isn’t the goal (which I agree with).

The important part here iis that you need to run locally with the same setup as on Netlify (if you produce different files in server mode, you need to run it once in regular mode).

This works if you do it right.

I’ve got it working with the resources folder in the deployed repo. Have you triggered a rebuild with ‘Clear build cache’?

1 Like

Dunno, I went back to Gulp because I couldn’t get the right files to generate and this is just for my personal site so not worth spending more time. Hopefully Netlify will add support soon. Thanks for trying to help

Check if your package.json defines the modules it needs as devDependencies. If so - netlify is not loading them. They need to be defined as dependencies. That was a solution to an unrelated issue I had earlier on netlify.

Thanks, it helped me a lot. I would have never thought of committing the resources folder otherwise :slight_smile:

It seems the last bit of work on the Netlify side is to update their build image so as Sass compiling can happen on the Hugo side of things: https://github.com/netlify/build-image/issues/183

For clarity to help others, here is the full process.

  1. Install the extended version of Hugo locally.
  2. Make sure you have resources and assets folders, create them if needed.
  3. Make sure both folders are added to your git commit.
  4. Move resources you wish process into the assets folder. I created sub-folders in the same structure as the static folder that previously contained my css & js assets.
  5. Adjust your templates to use the resources function. See below for some examples.
  6. Run either hugo or hugo server to populate the resources folder.
  7. Update your netlify.toml settings file so that Netlify uses Hugo v0.45+
  8. Commit and sync your git repo - Netlify should now build your site just fine.
  9. Test and enjoy!

Examples from my layouts/_default/baseof.html.

For CSS, note the use of BulmaCSS and my own overrides. This is in the <head> section:

    {{/* Bundle and minimise CSS resources */}}
    {{- $bulmacss := resources.Get "css/bulma.css" -}}
    {{- $css2016 := resources.Get "css/2016.css" -}}
    {{- $syntax := resources.Get "css/syntax.css" | minify | fingerprint -}}
    {{- $styles := (slice $bulmacss $css2016) | resources.Concat "css/bundle.css" | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ $syntax.Permalink }}" integrity="{{ $syntax.Data.Integrity }}" crossorigin="anonymous">

Note that I am using the Monokai formatting for the highlight shortcode and it fails to bundle correctly for me so I have to keep it separate.

And for JavaScript, towards the bottom of the <body>:

    {{ $js := resources.Get "js/2016.js" | resources.Minify | resources.Fingerprint }}
    <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>

Worth noting that this is actually defined in my theme rather than the site itself. If using assets in a theme, you can choose whether to run Hugo against your theme (run it against the theme folder) in order to create the resources in the theme or you can get each site to create and commit the resources and that’s what I’m doing as it seems simpler to me. Both work just fine with the assets in the theme’s assets folder.

The theme is here in case you are interested:

7 Likes