Sass folder

support
1

Hello, I’m trying to use sass on one-click-hugo-cms from netlify. Where I should place my sass files? My folder structure can be seen in original repo here: https://github.com/netlify-templates/one-click-hugo-cms
Any help to getting sass to work would be much appreciated.

Thank you.

Jo

2

I’ve seen that people use asset/theme dir for scss files but I don’t want to use any theme. I’m ok with what I’ve got now. It’s just that i don’t know what’s the place for scss files.

3

In its default setting, you need to put the SCSS somewhere below /assets.

4

Thank you. I’ve just added /assets/scss/main.scss to project dir. Nothing happened. I’ve also tried under /src/assets/scss… still nothing. Am I missing something?

5

Say you have your sass file at /assets/scss/main.scss. Now, you need to use resources.Get and then generate a permalink with .Permalink.

{{/*
This goes in your head.html file (which is included in your main layout file), probably stored at layouts/partials/head.html.
Replace your link tag with this code.
Also, ensure that you are using Hugo's extended version, which is required for you to run Hugo's asset pipeline.
*/}}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

See this.

6

I am getting an error:

ERROR 2019/08/30 15:12:23 Failed to render pages: render of “page” failed: “D:\Projects\Active\tryanglist\Code\portfolio-blog\site\layouts\post\single.html:4:57”: execute of template failed: template: post\single.html:3:5: executing “post\single.html” at <partial “head” .>: error calling partial: “D:\Projects\Active\tryanglist\Code\portfolio-blog\site\layouts\partials\head.html:4:57”: execute of template failed: template: partials/head.html:4:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations

7

Are you sure you are using Hugo’s extended version?

8

Hello,
Thanks for your help.

Here’s the version output (both global version and from ./bin/hugo.exe inside the project). This is because I’m not so sure which version is being called by “npm start”. I’ve copied my global version of hugo to the project bin folder, just to be sure.

PS D:\Projects\Active\tryanglist\Code\portfolio-blog> hugo version
Hugo Static Site Generator v0.57.2/extended windows/amd64 BuildDate: unknown
PS D:\Projects\Active\tryanglist\Code\portfolio-blog> .\bin\hugo.exe version
Hugo Static Site Generator v0.57.2/extended windows/amd64 BuildDate: unknown
PS D:\Projects\Active\tryanglist\Code\portfolio-blog>

Also, here’s the log from npm start:

PS D:\Projects\Code\portfolio-blog> npm start

victor-hugo@1.0.0 start D:\Projects\Code\portfolio-blog
run-p start:**

victor-hugo@1.0.0 start:hugo D:\Projects\Code\portfolio-blog
hugo -d …/dist -s site -vw

victor-hugo@1.0.0 start:webpack D:\Projects\Code\portfolio-blog
webpack-dev-server --config webpack.dev.js --hot

INFO 2019/09/01 08:11:00 No translation bundle found for default language “en”
INFO 2019/09/01 08:11:00 Translation func for language en not found, use default.
INFO 2019/09/01 08:11:00 i18n not initialized; if you need string translations, check that you have a bundle in /i18n that matches the site language or the default language.
INFO 2019/09/01 08:11:00 Using config file:
Building sites … INFO 2019/09/01 08:11:00 syncing static files to D:\Projects\Code\portfolio-blog\dist
INFO 2019/09/01 08:11:00 found taxonomies: map[string]string{“category”:“categories”, “tag”:“tags”}
ERROR 2019/09/01 08:11:00 render of “home” failed: execute of template failed: template: index.html:3:5: executing “index.html” at <partial “head” .>: error calling partial: “D:\Projects\Code\portfolio-blog\site\layouts\partials\head.html:5:57”: execute of template failed: template: partials/head.html:5:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations
ERROR 2019/09/01 08:11:00 render of “page” failed: “D:\Projects\Code\portfolio-blog\site\layouts\post\single.html:5:57”: execute of template
failed: template: post\single.html:3:5: executing “post\single.html” at <partial “head” .>: error calling partial: “D:\Projects\Code\portfolio-blog\site\layouts\partials\head.html:5:57”: execute of template failed: template: partials/head.html:5:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations
ERROR 2019/09/01 08:11:00 render of “page” failed: “D:\Projects\Code\portfolio-blog\site\layouts\post\single.html:5:57”: execute of template
failed: template: post\single.html:3:5: executing “post\single.html” at <partial “head” .>: error calling partial: “D:\Projects\Code\portfolio-blog\site\layouts\partials\head.html:5:57”: execute of template failed: template: partials/head.html:5:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations
ERROR 2019/09/01 08:11:00 render of “page” failed: “D:\Projects\Code\portfolio-blog\site\layouts\post\single.html:5:57”: execute of template
failed: template: post\single.html:3:5: executing “post\single.html” at <partial “head” .>: error calling partial: “D:\Projects\Code\portfolio-blog\site\layouts\partials\head.html:5:57”: execute of template failed: template: partials/head.html:5:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations
Total in 178 ms
Error: Error building site: failed to render pages: render of “page” failed: “D:\Projects\Code\portfolio-blog\site\layouts_default\single.html:5:57”: execute of template failed: template: _default\single.html:3:5: executing “_default\single.html” at <partial “head” .>: error calling partial: “D:\Projects\Code\portfolio-blog\site\layouts\partials\head.html:5:57”: execute of template failed: template: partials/head.html:5:57: executing “partials/head.html” at <resources.ToCSS>: error calling ToCSS: type not supported in Resource transformations
npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! victor-hugo@1.0.0 start:hugo: hugo -d ../dist -s site -vw
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the victor-hugo@1.0.0 start:hugo script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Jovana\AppData\Roaming\npm-cache_logs\2019-09-01T06_11_00_770Z-debug.log
ERROR: “start:hugo” exited with 4294967295.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! victor-hugo@1.0.0 start: run-p start:**
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the victor-hugo@1.0.0 start script.

9

Now I got it to parse the files.
The place for sass is in /src/assets/.

But. Still no luck with hugo version even though I’ve checked what’s my global hugo version and what came with the project code in ./bin/.

As a remark, I’ve used npm start for starting hugo server. I’ve discovered that npm module hugo-bin is not installed as an extended version.

Is there a way to change devDependencies part of package.json in order to change hugo-bin to extended version?

Also, I can confirm that sass processing is working when I start hugo from /site dir. Althouth I don’t have any other css styles defined as part of netlify template.

10

I use Hugo on Linux OS (find it slightly easier :smile:). Maybe someone more acquainted with the matter could help. You might want to adjust title of the question to reflect you are using Windows, Netlify; or now that the question has fairly changed, open a new one.

11

Thank you @SanmayJoshi and @bep. You’ve helped a lot.
I don’t think this has anything to do with OS. We just need to tell npm to install hugo-bin with extended tag. Something like this:

{
  "name": "your-package",
  "version": "0.0.1",
  "hugo-bin": {
    "buildTags": "extended"
  }
}

But I’ve had no luck with package.json nor with .npmrc.

I’ll open another thread for this.

Jo