+++
date = "2019-02-27"
tags = ["hugo"]
title = "hugoでscssをbuildする"
slug = "hugo"
+++

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

https://github.com/gohugoio/hugo/releases

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

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

```html
{{ $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`しといたほうがいいでしょう。