未完成で完成形

noob から hacker になりたい

hugo で sass を css に変換し style タグ内に挿入する方法

以前 Jekyll で行う方法 を書きましたが、今回は hugo で sass(scss) を css に変換し style タグ内に挿入できるようにしたいと思います。

AMP HTML のページを用意しようと思ったときに css を scss で書いてた場合に外部ツールを使って挿入するしてもいいですが静的サイトジェネレータ側で行えるのであれば完結するため紹介します!

やり方

テンプレートから assets にアクセスする方法は簡単で例のように書くと変換後の css を挿入できます。

ここでは /assets/main.scss を変換し挿入します。

{{ with resources.Get "main.scss" | toCSS | minify }}
	<style>{{ .Content | safeCSS }}</style>
{{ end }}

あとがき

with でアクセスできるとは思ってなくて驚きました。

しかしこのおかげで hugo でも AMP HTML を使用するときに簡単に挿入できるようになりました!