Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't read SASS files with Hugo

Dear Excellent developes.

I'm trying to duild static web site with Hugo (Netlify CMS). I wanna build from scratch, if I can;-) ( I designed the site by myself. SO I wanna write sass from scratch).

But, sass files aren't read successflly. Do you solve the problem?

I checked there pages to solve it , But I couldn't

  • https://gohugo.io/hugo-pipes/scss-sass/
  • https://discourse.gohugo.io/t/custom-css-throws-type-nil-not-supported-in-resource-transformations/19942

the structure of this Web site

Basically, there are not many changes from Hugo install.

  • layouts/index.html // I write there the following code.
  • resources/_gen/assets/sass/main.scss // I wrote simple css to this file → html {background: yellow;}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  {{ $sassTemplate := resources.Get "sass/main.scss"  }}
  {{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
  <link rel="stylesheet" href="{{ $style.relURL }}">
</head>

<body>
  <h1>Nice. It's looking good already.</h1>
  <ul>
    {{ range (where .Pages "Section" "blog") }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ .Title }}
      </a>
    </li>
    {{ end }}
  </ul>
</body>

</html>

Error messages

Rebuild failed:

Failed to render pages: render of "home" failed: "/Users/RPOISITORY-NAME/layouts/index.html:11:40": execute of template failed: template: index.html:11:40: executing "index.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
↓
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  {{ $sassTemplate := resources.Get "sass/main.scss"  }}
  {{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
  <link rel="stylesheet" href="{{ $style.relURL }}">
</head>

hugo v0.81.0+extended darwin/amd64 BuildDate=unknown

Thanks in advance.

like image 322
mofuty Avatar asked Nov 04 '25 08:11

mofuty


1 Answers

Your .scss files must be in the assets folder at the root of your project, and not in the sub-folder resources/_gen/assets.

I wrote a post in french on the topic, maybe you can grab some hints / use a translator

like image 76
roneo.org Avatar answered Nov 07 '25 16:11

roneo.org



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!