I can't load SASS/SCSS style sheets

support
1

I’m new to Hugo, I moved to it just a few months ago given the countless advantages it offered me over Jekyll. I need to load the SASS/SCSS style sheets on my site, but I just get errors and I don’t know why.

This is the code of my head.html.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="{{ .Site.Params.description }}"
  />
  {{ if (eq .Title .Site.Title) }}
    {{ with $title := .Title }}
      <title>{{ . }}</title>
    {{ end }}
  {{ else }}
    {{ with $title := printf "%s | %s" .Title .Site.Title }}
      <title>{{ . }}</title>
    {{ end }}
  {{ end }}
  {{ $sass := resources.Get "sass/main.scss" }} 
  {{ $style := $sass | resources.ToCSS | resources.Minify | resources.fingerprint  }}
  {{ if $sass }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
  {{ end }}
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
</head>

And these are the directories:

├── archetypes
│   └── default.md
├── exampleSite
│   ├── config.yaml
│   ├── content
│   │   ├── about.md
│   │   ├── media.md
│   │   └── posts
│   │       └── who-i-am.md
│   └── resources
│       └── _gen
│           ├── assets
│           └── images
├── images
│   ├── screenshot.png
│   └── tn.png
├── layouts
│   ├── 404.html
│   ├── categories
│   │   ├── taxonomy.html
│   │   └── terms.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── default.html
│   │   └── summary.html
│   ├── index.html
│   ├── partials
│   │   ├── footer.html
│   │   ├── header.html
│   │   ├── head.html
│   │   ├── pagination.html
│   │   ├── postMetaDetailed.html
│   │   ├── postMeta.html
│   │   ├── postsByDate.html
│   │   └── terms.html
│   ├── posts
│   │   ├── list.html
│   │   └── single.html
│   ├── shortcodes
│   │   ├── about-html.html
│   │   └── postraw.html
│   └── tags
│       ├── taxonomy.html
│       └── terms.html
├── README.md
├── static
│   ├── android-icon-144x144.png
│   ├── android-icon-192x192.png
│   ├── android-icon-36x36.png
│   ├── android-icon-48x48.png
│   ├── android-icon-72x72.png
│   ├── android-icon-96x96.png
│   ├── apple-icon-114x114.png
│   ├── apple-icon-120x120.png
│   ├── apple-icon-144x144.png
│   ├── apple-icon-152x152.png
│   ├── apple-icon-180x180.png
│   ├── apple-icon-57x57.png
│   ├── apple-icon-60x60.png
│   ├── apple-icon-72x72.png
│   ├── apple-icon-76x76.png
│   ├── apple-icon.png
│   ├── apple-icon-precomposed.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon-96x96.png
│   ├── favicon.ico
│   ├── fonts
│   │   ├── iosevka-bold.woff2
│   │   ├── iosevka-oblique.woff2
│   │   └── iosevka-regular.woff2
│   ├── images
│   │   ├── 404.jpg
│   │   ├── brandIcon.jpg
│   │   └── screenshot.png
│   ├── js
│   ├── key.txt
│   ├── ms-icon-144x144.png
│   ├── ms-icon-150x150.png
│   ├── ms-icon-310x310.png
│   ├── ms-icon-70x70.png
│   ├── sass
│   │   ├── _font.scss
│   │   ├── main.scss
│   │   ├── _reset.scss
│   │   └── _smigle.scss
│   └── site.webmanifest
└── theme.toml

When I launch the server locally, I get the following error:

error calling ToCSS: type <nil> not supported in Resource transformations
Built in 303 ms

Could I know why this happens to me? I suppose that, due to the nature of the error, being that it is repeated several times exactly, the solution must be simple and maybe it is only related to the form that I am invoking the resources.ToCss.

2

The resources.Get function is looking for global assets. Global assets are stored in the assets directory in the root of your project.