Importing a CSS file with nested imports

[zoliky]

Hello,
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?

[jmooring]

@zoliky

@import "general.css";
@import "navigation.css";
@import "posts.css";

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

[zoliky]

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:

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

[jmooring]

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:

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

[zoliky]

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.

[jmooring]

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

[zoliky]

I found one of your older posts here:

CSS and @import

Assuming that I understand your objective… @import in a CSS file reference the other files, it does not import them in the same way that Sass does during transpilation. So I think you would need to: 1) Name your CSS files so that when sorted they are concatenated in the correct order: 01_main.css 02_reset.css 03_vars.css 04_layout.css 2) Use resources.Match "*.css" to get all of them. 3) Sort them (resources.Match may already do that… I don’t remember). 4) Concatenate them with resources.…

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?

[jmooring]

@zoliky

I want to do the same, to have 01_something.css, 02_something.css, then concatenate them and import.

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

[zoliky]

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?

[jmooring]

Correct. Try it:

git clone --single-branch -b hugo-forum-topic-49913 https://github.com/jmooring/hugo-testing 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 }}

[zoliky]

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?

[jmooring]

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

[chrillek]

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