Hugo + SASS

A cél: egy Hugo-projektben álljon a rendelkezésünkre konfigolható Bulma; JS nincs vagy csak kevéske. A Hugo maga is képes SASS-feldolgozásra, nem kell hozzá JS. Később megnézem, van-e ennek haszna ahhoz képest, hogy ha a jól bevált Laravel Mixet integrálnám (tehát külön npm+webpack build).

A beállítás nem nehéz, de nem is magától értetődő. Nagyrészt benne van a doksiban, amely használhatóságban messze elmarad a Laravelétől vagy a VueJS-étől.

Először is: a SASS/SCSS támogatás csak az „extended” Hugo-verzióban van benne. Lásd: Hugo telepítése forrásból.

$ hugo env
$ cd ~/sites
$ hugo new site mysite

Azt mondtam, hogy nem kell hozzá JS? Nos az npm mégis kell, most csak egyetlen CSS-csomagot telepítünk vele, amelynek még függőségei sincsenek.

$ cd mysite
$ nano package.json
$ npm i

{
  "private": true,
  "dependencies": {
    "bulma": "^0.8.0"
  }
}

Hozzuk létre a saját SCSS-fájlunkat az assets mappában, legyen a neve mondjuk assets/sass/app.scss, mint a Laravel defaulté.

@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800);
@import 'bulma/sass/utilities/_all';

$body-background-color: $white-ter;
$family-primary: "Open Sans", sans-serif;

@import 'bulma/bulma';

// stb...

Ezután jöhet a Hugo Pipes. Nyissuk meg a témánkban azt a fájlt, amely behúzza a css-t, például most legyen a layouts/partials/header.html, és szúrjuk be a CSS(ek) helyére ezt:

{{ $css := resources.Get "sass/app.scss" | toCSS .Site.Params.Sass | fingerprint }}
<link rel="stylesheet" href="{{ $css.Permalink }}">

A toCSS opcióiként megadott .Site.Params.Sass saját paramétert jelöl, amelyet definiálnunk kell a Hugo-projekt konfigjában (config.yaml). Átnevezhetjük a végeredmény CSS-t, és ami a legfontosabb: megadhatjuk a node_modules-t import mappaként.

params:
  sass:
    targetPath: "css/app.css"
    outputStyle: "compressed"
    enableSourceMap: false
    includePaths: ["node_modules"]