Correct usage of theme style.css

support
1

Hi - I created a new theme from scratch for my hugo site but I must be missing something about correct usage of my theme style sheet.

In my theme layout, my baseof.html includes a head.html page:

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
    </body>
</html>

And my head.html page is where I’m including my style.css:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
        {{- block "title" . -}}
        {{ .Title}}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}
        {{- end -}}
    </title>

    <link rel="stylesheet" href="css/style.css">

</head>

So far so good, my main index.html page located in my theme ‘layouts’ directory shows up with all my styling.

But when I create a new post using the command hugo new mypage.html the page renders without the styling applied and I get the following error: Refused to apply style from 'http://localhost:1313/static/css/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. I’m pretty sure this unhelpful error appears because its not finding my style sheet (located in my theme folder).

To test this, I duplicated my css folder and pasted it in my static folder, but for some reason I am getting the same error. What is going on here and how can I have my theme style apply to ALL my pages?

2

Of course I figured it out a minute after I posted this. The correct answer is to point to your css page like this:

    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css" />
3

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