What version of Hugo are you using (hugo version)?
$ hugo version
hugo v0.161.1-ea8f66a7ce988664dcc84c052fc96757042e2e4a linux/amd64 BuildDate=2026-04-29T13:56:01Z VendorInfo=gohugoio
Does this issue reproduce with the latest release?
Yes
Bug Report
Greetings.
I'm trying the new CSS.build function and stumbled upon this behaviour:
Starting with the default example with this assets folder configuration:
% tree assets
.
├── css
│ ├── components
│ │ ├── footer.css
│ │ └── header.css
│ └── main.css
├── fonts
│ ├── comic_neue
│ │ ├── ComicNeue-BoldItalic.ttf
│ │ ├── ComicNeue-Bold.ttf
│ │ ├── ComicNeue-Italic.ttf
│ │ ├── ComicNeue-LightItalic.ttf
│ │ ├── ComicNeue-Light.ttf
│ │ ├── ComicNeue-Regular.ttf
│ │ ├── fonts.css
│ │ └── OFL.txt
└── js
└── main.js/* css/main.css */
@import "components/header.css";
@import "components/footer.css";
@import "/fonts/comic_neue/fonts.css";
body {
color: #222;
font-family: "Comic Neue", sans-serif;
line-height: 1.5;
margin: 1rem;
max-width: 768px;
}
a {
color: #00e;
text-decoration: none;
}/* fonts/comic_neue/fonts.css */
@font-face {
font-family: 'Comic Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(ComicNeue-Regular.ttf) format('truetype');
}I end up with the wrong result depending if the output is inlined or exported as a file:
Inline
{{- with resources.Get "css/main.css" }}
{{- $opts := dict
"minify" (cond hugo.IsDevelopment false true)
"sourceMap" (cond hugo.IsDevelopment "linked" "none")
}}
{{- with . | css.Build $opts }}
{{- if hugo.IsDevelopment }}
<style>{{ .Content | safeCSS }}</style>
{{- else }}
{{- with . | fingerprint }}
<style>{{ .Content | safeCSS }}</style>
{{- end }}
{{- end }}
{{- end }}
{{- end }}
inlined in /index.html
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/css/components/header.css */
header {
border-bottom: 1px solid #222;
margin-bottom: 1rem;
}
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/css/components/footer.css */
footer {
border-top: 1px solid #222;
margin-top: 1rem;
}
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/fonts/comic_neue/fonts.css */
@font-face {
font-family: "Comic Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./ComicNeue-Regular-AN2NLIGV.ttf") format("truetype");
}
/* <stdin> */
body {
color: #222;
font-family: "Comic Neue", sans-serif;
line-height: 1.5;
margin: 1rem;
max-width: 768px;
}
a {
color: #00e;
text-decoration: none;
}
/*# sourceMappingURL=main.css.map */Standard File
{{- with resources.Get "css/main.css" }}
{{- $opts := dict
"minify" (cond hugo.IsDevelopment false true)
"sourceMap" (cond hugo.IsDevelopment "linked" "none")
}}
{{- with . | css.Build $opts }}
{{- if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{- else }}
{{- with . | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}
{{- end }}
file: /css/main.(fingerprint).css
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/css/components/header.css */
header {
border-bottom: 1px solid #222;
margin-bottom: 1rem;
}
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/css/components/footer.css */
footer {
border-top: 1px solid #222;
margin-top: 1rem;
}
/* ns-hugo-imp:/home/icpmoles/misc/mysite/themes/mytheme/assets/fonts/comic_neue/fonts.css */
@font-face {
font-family: "Comic Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./ComicNeue-Regular-AN2NLIGV.ttf") format("truetype");
}
/* <stdin> */
body {
color: #222;
font-family: "Comic Neue", sans-serif;
line-height: 1.5;
margin: 1rem;
max-width: 768px;
}
a {
color: #00e;
text-decoration: none;
}
/*# sourceMappingURL=main.css.map */In both cases the output directory is as follow:
% tree public/css
public/css
├── ComicNeue-Regular-AN2NLIGV.ttf
└── main.6d92f62ac67c8f5441a18c658978e167af4dc64619e5a0b57172ca9eab96ded9.css
Expected behaviour
The .Content should either:
- resolve the relative path of the asset to the page
- use only absolute paths
@font-face {
font-family: "Comic Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/css/ComicNeue-Regular-AN2NLIGV.ttf") format("truetype");
}Misc
CSS Inline Example from the documentation
Minimal example for reproduction
What version of Hugo are you using (
hugo version)?Does this issue reproduce with the latest release?
Yes
Bug Report
Greetings.
I'm trying the new CSS.build function and stumbled upon this behaviour:
Starting with the default example with this assets folder configuration:
% tree assets . ├── css │ ├── components │ │ ├── footer.css │ │ └── header.css │ └── main.css ├── fonts │ ├── comic_neue │ │ ├── ComicNeue-BoldItalic.ttf │ │ ├── ComicNeue-Bold.ttf │ │ ├── ComicNeue-Italic.ttf │ │ ├── ComicNeue-LightItalic.ttf │ │ ├── ComicNeue-Light.ttf │ │ ├── ComicNeue-Regular.ttf │ │ ├── fonts.css │ │ └── OFL.txt └── js └── main.jsI end up with the wrong result depending if the output is inlined or exported as a file:
Inline
{{- with resources.Get "css/main.css" }} {{- $opts := dict "minify" (cond hugo.IsDevelopment false true) "sourceMap" (cond hugo.IsDevelopment "linked" "none") }} {{- with . | css.Build $opts }} {{- if hugo.IsDevelopment }} <style>{{ .Content | safeCSS }}</style> {{- else }} {{- with . | fingerprint }} <style>{{ .Content | safeCSS }}</style> {{- end }} {{- end }} {{- end }} {{- end }}inlined in /index.html
Standard File
{{- with resources.Get "css/main.css" }} {{- $opts := dict "minify" (cond hugo.IsDevelopment false true) "sourceMap" (cond hugo.IsDevelopment "linked" "none") }} {{- with . | css.Build $opts }} {{- if hugo.IsDevelopment }} <link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous"> {{- else }} {{- with . | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{- end }} {{- end }} {{- end }} {{- end }}file: /css/main.(fingerprint).css
In both cases the output directory is as follow:
Expected behaviour
The
.Contentshould either:Misc
CSS Inline Example from the documentation
Minimal example for reproduction