Importing a CSS file with nested imports

I have a main.css file that only contains import statements for other CSS files, like this:

@import "general.css";
@import "navigation.css";
@import "posts.css";
and so on..

I tried loading the main.css file in Hugo, and although it loads the file, the imported files are not loaded.

  {{ "<!-- Styles -->" | safeHTML }}
  {{- $style := resources.Get "css/main.css" | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $style.RelPermalink }}">

Any ideas what could be causing this issue?

Where are these files located relative to the root of your project directory?

My apologies for not sharing that information earlier. I’m relatively new to Hugo. What I did was create a custom theme and placed the files inside themes/custom-theme/assets/css/ folder. So, the folder’s content is this:

   + themes/
       + custom-theme/
                 + assets
                     + css/
                       - main.css
                       - general.css
                       - posts.css
                     + js/

Yeah, that’s not going to work. Files in the assets directory are not published unless they are captured as a resource, then published with the Permalink, RelPermalink, or Publish methods.

Since you’re publishing the main file to css/main.css, perhaps the easiest approach is to place them in static:

├── css/
│   ├── general.css
│   ├── navigation.css
│   └── posts.css
└── favicon.ico

I used to use Sass in the assets folder and it worked fine. But now, since CSS can do what I need (like nesting), I switched to vanilla CSS. So, those files have to go in the static folder instead. Thank you.

Right. A Sass @import (now @use) is very different than a CSS @import.

I found one of your older posts here:

I want to do the same, to have 01_something.css, 02_something.css, then concatenate them and import. In that case I create a resource, right? so I can still use the “assets” folder?

Why not concatenate main+foo+bar, instead of concatenating foo+bar and importing it into main? With one file there’s… one browser request.


Thank you. I’ll do that and see how it works. So in that case, I don’t need the import statements at all, right?

Correct. Try it:

git clone --single-branch -b hugo-forum-topic-49913 hugo-forum-topic-49913
cd hugo-forum-topic-49913
hugo server

baseof.html contains this:

{{ with resources.Match "css/*" }}
  {{ with resources.Concat "css/style.css" . | minify | fingerprint  }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ end }}
{{ end }}

Before I saw your post I tried adding this into the head section and it seems to work:

  {{ "<!-- Styles -->" | safeHTML }}
  {{ $css := resources.Match "css/*.css" }}
  {{ $css = $css | resources.Concat "styles.css" | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">

Should I go with your method instead?

They do the same thing. I tend to code defensively and make heavy use of context.

1 Like

As @jmooring said: each @import creates a server request. Not good for the performance, thus perhaps not good for your search engine ranking.

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