Getting Zurb Foundation to work with Hugo Pipes

support
1

Hi folks

I’m trying to get Hugo Pipes to work with Foundation CSS framework, but the CSS file that it outputs only contains the headers from the first foundation.scss file. I added a reference to a custom scss file and it pulls that in, but is ignoring the Foundation stuff.

Has anyone else attempted to do this and been successful? Any tips or suggestions for getting this running would be gratefully received!

2

Yes, worked fine (as with every CSS framework - just tried that with Bulma). It would help if you could submit a repo to look at.

3

Here’s my partial css.html:

{{/* <!-- SCSS --> */}}
{{ $inServerMode := .Site.IsServer }}
{{ $sass         := "scss/main.scss" }}
{{ $sassIncludes := (slice "assets/scss") }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

{{ if $inServerMode }}

    {{ $css := resources.Get $sass | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $css.Permalink }}" media="screen">

{{ else }}

    {{ $css := resources.Get $sass | toCSS $cssOpts | resources.PostCSS | fingerprint }}
    <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" media="screen">

{{ end }}

With this setup you can import any SCSS-File in your main.scss (or in another scss file) and it will compile. Maybe this partial can be optimized further but that’s what I’m using in my test project at the moment.

Hope this helps.

3 Likes