Importing CSS files from a CSS file not working

support
1

Hi.

I like splitting my CSS files and then combining them all in index.css.

However, this doesn’t seem to work. For context: index.css lives in ./assets/styles. Then in a partial called head.html I use it like this:

...
{{ $index := resources.Get "styles/index.css" | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $index.Permalink }}" />

The other css files also live in ./assets/styles, though I’ve also tried putting all but index.css in ./static/styles as well.

index.css looks like this:

@import url("reset.css");
@import url("variables.css");

I have noticed that when I build the project, the other CSS files are nowhere to be found: they don’t get compiled.

Anyone able to help?

2

What does that mean, exactly? Do you get an error message (which one)? Can your browser not load the CSS (check its developer tools console)?

What are “the other CSS files”?

Aside: While @import is helpful to structure your CSS, it might be detrimental to page load speed: What Is CSS @import And Why Can It Slow Down Websites? | DebugBear

3

Hugo publishes assets to the publishDir (typically public ) when you invoke .Permalink , .RelPermalink , or .Publish . You can use .Content to inline the asset.
—— Hugo Pipes | Hugo

In your approach, you’ll need to publish each CSS as you did for styles/index.css.

4

Piling on here, but…

The CSS import statement, in this context, doesn’t do what you think it does.

If you want to “compile” all files into one, you can do either of:

  1. Remove the import statements and use the resources.Concat template function
  2. Create a main.scss file, using either @import or @use (depending on the transpiler), then transpile the Sass to CSS using the resources.ToCSS template function
1 Like