Using Sass @use with a page bundle

support
,
1

I have some custom CSS for my home page (and a couple of others). I’ve named my file .scss, in this case home.scss. My head.html searches for and imports this, this part is working fine for all pages.

I want to split it up a bit to keep it tidy, so I’ve created _banner.scss.

/content
   |- _index.html
   |- home.scss
   |- _banner.scss

In my home.scss:

@use 'banner'
@use '/banner'
@use './banner'

All of these options fail with “can’t find stylesheet to import”. I’m not sure what path to use here?

2

Hugo resolves Sass files in:;

  1. css.Sass
  2. The assets mount.
  3. Fall back to letting the Sass engine (e.g. Dart sass) doing the resolving.

If you want to have your Sass files in content you can either:

  1. Add that folder to the includePaths option slice.
  2. Double mount content into assets (search for mounts in the docs)
3

Thanks for the info.

I’m a little confused, from what I’ve read about page bundles, any additional files should be page resources? My home.scss file appears to be in the current directory but the _banner.scss does not.

So, from what you’ve said, am I correct in thinking the build process goes:

  1. Hugo builds _index.html. Presume that Hugo does this in some temporary directory.
  2. Hugo sees home.scss and pulls this into the page bundle. Hugo knows where to find this file.
  3. Hugo calls Dart to compile the scss.
  4. Dart tries to build home.scss from the temporary directory.
  5. Dart finds the @use ‘banner’ line but, does not know where to find this file?

If this is correct, is there a way for Hugo to tell Dart where the ‘current directory’ is using the --load-path parameter?

4

This is actually done by the template the current page is using. Often in a dedicated partial for css includes.

have a look at the example here

search for toCSS in your layouts or your theme folder to find it

5

Understood, so I have css.html in my layout, which is (nearly) the default one created with the hugo new theme command. I’ve modified it slightly to include the .Title scss file.

{{- $styles := slice (resources.Get "css/styles.scss") }}
    {{- with .Resources.Get (printf "%s.scss" .Title) }}
    {{- $styles = $styles | append . }}
{{- end }}

{{- range $styles }}
    {{- $css := . | toCSS (dict "transpiler" "dartsass") }}
    {{- if eq hugo.Environment "development" }}
        <link rel="stylesheet" href="{{ $css.RelPermalink }}">
    {{- else }}
        {{- with $css | minify | fingerprint }}
            <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
        {{- end }}
    {{- end }}
{{- end }}

So something would have to happen here, to look for all scss files? Anything beginning with an _ would be processed by Dart, so it only needs to be available at that time?

Seems like this may be an overcomplicated solution to a minor aethetic issue.

6

mmh. I think I cannot follow your last questions. But as mentioned before:

7

This example site transpiles Sass page resources:

git clone --single-branch -b hugo-forum-topic-55035 https://github.com/jmooring/hugo-testing hugo-forum-topic-55035
cd hugo-forum-topic-55035
hugo server

Files of interest:

  • layouts/baseof.html (line 7)
  • layouts/_partials/page-css.html
  • content/posts/post-1/sass/* (the page resources)

In my view this isn’t a great idea because:

  1. It’s complicated

  2. Your published site will include the Sass files. You can disable the publishing of page resources using build options, but that is coarse-grained (i.e., you can’t disable publishing based on media type, extension, path, etc.):

    public/
├── posts/
│   ├── post-1/
│   │   ├── sass/
│   │   │   ├── _foo.scss
│   │   │   ├── main.5664462a48474473234ba7318125b4dd143336d145e0763c17e820611f92fb79.css
│   │   │   └── main.scss
│   │   └── index.html
│   └── index.html
├── favicon.ico
└── index.html
2 Likes
8

Thanks @jmooring for spending the time on that example.

Agree it’s not great to have the Sass in the build. I think this may be a case of it being more complicated than it’s worth for this issue. Maybe something to build into a future version of Hugo somehow.

One other thought, @bep suggested using includePaths, could this be used to automatically include the relevant directory inside content? I’m not sure if you can do this in front matter or something like that?

9

The example I provided does use the includePathsoption.

10

Sorry, I completely missed that!

Is there a way then to modify the line:

{{- $css := . | toCSS (dict "transpiler" "dartsass") }}

to pass the path generated in your example:
printf "content%s/sass" $.Path

To dartsass CLI using the --load-path parameter documented here?

11

I don’t understand your question. The example that I provided works great.

12

Just trying to avoid having the scss files in the published site.

It’s fine, it’s a great fix, thank you. I’ll just rm the scss after build :slight_smile: