Can't read SASS files with Hugo

support
1

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 hope to 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

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;}

layouts/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.

2

AFAIK _gen is a working directory created by hugo to process the site.

You need to put your scss and other referenced files in the assets directory as indicated here:

unfortunately the directory tree depicted is missing the assets folder.

follow up by trying to understand this section:

hope this helps you get on your way.

2 Likes
3

Dear joeborg

Oh, Thank you very much…!!
I tried to solve the problem all the night yesterday…
I would like to try them.

4

As @joeborg noted, your asset files belong into assets. The folder resources is dynamically created and used by Hugo to cache prepared asset files:

  {{ $sassTemplate := resources.Get "sass/main.scss"  }}

This line looks for the file in /assets/sass/main.scss.

1 Like
5

Oh… My … GOD!!!
It seems that it succeed…!!!
I can’t believe…!!! I let out a cry of joy without thinking…!!!

The answer was follows:

Path of the sass file

  • REPOISITORY-NAME/sass/main.scss
    • → the compiled file is in REPOISITORY-NAME/resources/_gen/assets/scss/sass/main.scss_2538feeffcbb857f4cc8772ebe8a0cd3.content

@joeborg @davidsneighbour Thank you for your advice…!!

But I came up with another question.
Which is pure compiled css file?:thinking: There is no main.css file in the repo nevertheless main.css is expressed in browser↓
<link rel="stylesheet" href="http://localhost:1313/main.css">

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.Permalink }}">
</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>

As you know I’m a Hugo beginner, I will post other questions in here again.
Anyway, This problem was solved. Thank you very much @joeborg and @davidsneighbour !!!

1 Like
6

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