30 lines
1.2 KiB
Markdown
30 lines
1.2 KiB
Markdown
|
+++
|
||
|
|
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`しといたほうがいいでしょう。
|
||
|
|
|
||
|
|
|