1
0
hugo/content/blog/2019-02-27-hugo.md
2024-04-23 22:21:26 +09:00

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