Theme inheritance and interaction of theme assets

support
1

In my site’s config file:

theme:
  - fonts
  - bootstrap
  - sprinkles

Relevant files from my themes directory:

/themes/fonts/assets/scss/fonts.scss
/themes/bootstrap/assets/scss/framework.scss
/themes/sprinkles/assets/scss/theme.scss

How i’m bundling the assets:

{{- $fonts := resources.Get "scss/fonts.scss" | resources.ExecuteAsTemplate "css/fonts.css" . | toCSS -}}
{{- $framework := resources.Get "scss/framework.scss" | resources.ExecuteAsTemplate "css/framework.css" . | toCSS -}}
{{- $theme := resources.Get "scss/theme.scss" | resources.ExecuteAsTemplate "css/theme.css" . | toCSS -}}
{{- $css := slice $fonts $framework $theme | resources.Concat "css/main.css" -}}
<link rel="stylesheet" href="{{ $css.Permalink }}">

Within /themes/sprinkles/assets/scss/theme.scss i attempt to make calls to Bootstrap mixins like so:

@include media-breakpoint-up(md) {
  // styles
}

But the attempt throws errors like this:

TOCSS: failed to transform "css/theme.css" (text/x-scss): SCSS processing failed: file "stdin", no mixin named media-breakpoint-up

My question: in sites which employ theme inheritance such as i have configured here, are theme assets necessarily siloed from one another? Will it always be impossible, for example, to access Bootstrap mixins in the way i’ve attempted?

Thanks for considering.

2

I wonder if you might be able to translate that into easier language :slight_smile: I don’t get it.

I myself use bootstrap the following way:

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $style := resources.Get "sass/theme.scss" | resources.ToCSS $options | resources.PostCSS (dict "config" "postcss.config.js" "noMap" true) |  resources.Fingerprint "sha512" }}

{{ return $style }}

note the include path parameter there

and then in my sass files:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/mixins";
// and so on...
3

Thanks pkollitsch, may i ask: are you using multiple themes as is outlined here:

Since Hugo 0.42 a project can configure a theme as a composite of as many theme components you need:

theme:
- my-shortcodes
- base-theme
- hyde

This is what i’m referring to when I reference “theme inheritance”—namely, a project which is a composite of multiple theme components. What i’m trying to ask is: can one of these theme components (e.g. custom styles stored in a theme called “sprinkles”) reference and make use of mixins (and other SASS features) from a separate theme component (e.g. bootstrap)?

4

I don’t think so. They probably run once per theme. That’s why I use Bootstrap (it’s not a theme really, right?) as a folder in node_modules.

I think of the themes more like a cascading override of the layouts directory. The assets part, piping it all together, is part of each theme. If the layout file is in ThemeA then it expects the assets in ThemeA.

5

Based on my experience, I suspect you’re right about how this plays out technically.

I agree that Bootstrap isn’t a theme, in the sense that it cannot stand on its own (like the themes in Hugo’s theme gallery can), but it seems to me that, with the addition of Modules to Hugo, it may no longer be accurate to think of a theme as exclusively something which can stand on its own. Like the documentation example I referenced above (which references “my-shortcodes” as a theme—though shortcodes obviously are not!), it seems to me our thinking is meant to shift in the direction of theme components (i.e. easily modifiable pieces and parts, the sum of which results in a theme).

Maybe i’ve misunderstood how all this is playing out. Modules and themes seem to be changing quickly within Hugo and it’s not like i’ve been much help in writing improved documentation. :man_facepalming:

In any case, i appreciate you taking the time to offer your thoughts on this question.

6

Actually this works:

config:

theme:
  - fonts
  - bootstrap
  - sprinkles

template:

{{- $fonts := resources.Get "scss/fonts.scss" | resources.ExecuteAsTemplate "scss/fonts.scss" . -}}
{{- $framework := resources.Get "scss/framework.scss" | resources.ExecuteAsTemplate "scss/framework.scss" . -}}
{{- $theme := resources.Get "scss/theme.scss" | resources.ExecuteAsTemplate "scss/theme.scss" . -}}

{{- if .Site.IsServer -}}
  {{- $css := slice $fonts $framework $theme | resources.Concat "scss/main.scss" | toCSS -}}
  <link
    rel="stylesheet"
    href="{{ $css.Permalink }}">
{{- else -}}
  {{- $css := slice $fonts $framework $theme | resources.Concat "scss/main.scss" | toCSS | minify | fingerprint "sha512" -}}
  <link
    rel="stylesheet"
    href="{{ $css.Permalink }}"
    integrity="{{ $css.Data.Integrity }}">
{{- end -}}

I’m sure there’s a way to make the resource calls much more DRY, but at least I know my original question is answered:

can one of these theme components (e.g. custom styles stored in a theme called “sprinkles”) reference and make use of mixins (and other SASS features) from a separate theme component (e.g. bootstrap)?

The answer is yes.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.