1.2 KiB
1.2 KiB
+++ 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して使うには、以下のような書き方をします。
{{ $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しといたほうがいいでしょう。