Overriding CSS via /static/style.css doesn't seem to work

[mocdaniel]

Hello,

I am facing problems while tweaking the CSS of the theme. I added the following directive into ./static/style.css:

a {
  color: #ff6266;
}

Hugo live-reloads the dev server, but seems to throw away the theme-generated CSS - I now get a webpage without any CSS except for the one setting above.

If I restart the dev server, the theme's CSS works again, but the custom CSS isn't rendered.

Any help appreciated!

[rseabra]

Hi, I have it as ./static/style.scss and it works (note the extra s in the extension and the @imports):

[rms@roque blog.1407.org]$ head static/style.scss 
@import "header";
@import "logo";
@import "menu";

body {
    background-color: black;
    background-image: url("/img/cropped-eu-header-20200715-4.png");
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: right top ;

[mocdaniel]

Thanks for the hint, I created a style.scss but according to the Hugo documentation this needs to be built into CSS, right?. How did you solve this?

Or in other words: Where do I put a directive such as

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

if I apply the theme using Hugo modules and thus don't actually have the theme's code in my repository?

[rseabra]

I don't know how using the theme as a hugo module rather than a git submodule would change anything in this regard, but I only add CSS data in that file and it works. That's how I changed how the theme looks at https://blog.1407.org/

[panr]

style.scss is a bug. I guess the conversion also changed the extension of this file. It should be style.css as it was before...

I'm going to fix it tomorrow.

[panr]

Done https://github.com/panr/hugo-theme-terminal/commit/613325cba00a8fbb63612fd1eb4994094709be78. Hope this will solve your issues ;-)

[mocdaniel]

Still the same :/

I updated the dependency running hugo mod get github.com/panr/hugo-theme-terminal@613325c, renamed the file to style.css and ran it both locally and as a built image deployed to its final destination.

Result is the same, when served via hugo serve -D the site doesn't apply any CSS except the directives added to ./static/style.css. When served in prod, by NGINX, it serves the theme's CSS but not the custom sheet.

After some more investigation I think it is because the file ./static/style.css gets injected into the final HTML with the same name (style.css) as the theme's predefined CSS, thus getting overwritten. Could this be possible?

Once I changed the name of the file to ./static/additionalStyle.css and adapted the snippet you changed in https://github.com/panr/hugo-theme-terminal/commit/613325cba00a8fbb63612fd1eb4994094709be78 to this:

<!-- Custom CSS to override theme properties (/static/style.css) -->
{{ if (fileExists "static/additionalStyle.css") -}}
  <link rel="stylesheet" href="{{ "additionalStyle.css" | absURL }}">
{{- end }}

it worked for me, see also this quick and dirty fork I did.

[panr]

Oh, that makes sense! 🤔 I will look at this again, I think I know where's the real issue.

[panr]

Ok, how about now? https://github.com/panr/hugo-theme-terminal/commit/1d7e65f42e010c381d0e904e65babd558a78dd14

[mocdaniel]

Yes, that did the trick! Thx for your assistance, you can close this issue now.