hugoでscssをbuildする

2019-02-27 / @syui

hugoは、ver:extendedでscssを簡単にcssにbuild(convert)することができます。

ex:hugo_extended_0.54.0_macOS-64bit.tar.gz

scssをcssにbuildして使うには、以下のような書き方をします。

{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

実際に編集するscssは、./assets以下に置きます。

上の記述で大体わかると思いますが、resources.Getでscssのファイルを指定し、toCSSで変換、minifyで最小化などを行います。それらのdate構造をstyleに入れて、そのdate構造から.Permalinkでcssに変換後のurlを取得している感じだと思います。

おそらく、hugo serverもしくはhugo(build)でresourcesの記述が実行され、./resources/以下にファイルが作成、参照されます。./public/にcssなどがbuildされます。

なお、themeをcloneした際、./にpackage.jsonがある場合は、$ npm iしといたほうがいいでしょう。