CODEWITHSUNDEEP
hugo
Arvind Singh
Arvind Singh

Reputation: 792

How to add a single HUGO page independent of theme and also add reference to SCSS?

I want to add a custom HTML page completely independent of the theme but at the same time want to reference the SCSS file for style.

What I have tried till now:

As per https://gohugo.io/hugo-pipes/scss-sass/ added below in HTML, not in the layout file but the actual content HTML file.

{{ $sass := resources.Get "sass/main.scss" }} 
{{ $style := $sass | resources.ToCSS }}

This output the above code without parsing.

Upvotes: 1

Views: 1175

Answers (1)

ruddra
ruddra

Reputation: 51998

For that custom page, you can create a new directory with the name of the page in the layouts folder and add a single.html file inside it. Also add the sass implementation in that single.html file. The folder structure will be like this:

Hugo Project
├── content
├── layouts
├── ├── _default
├── ├── partial
│   └── custom_dir(the url outside of the theme)
│      └── single.html
├── static
├── themes
└──config.toml

Sass implementation:

{{ $sass := resources.Get "sass/main.scss" }} 
{{ $style := $sass | resources.ToCSS }}

<link rel="stylesheet"
  href="{{ $style.Permalink }}">

Upvotes: 1

Related Questions