【HUGO】テーマ導入で躓いたメモ

とあるテーマでビルドが出来なかったので、原因調査をした話。

# 環境
hugo　v102
npm　8.1.0

# テーマ
入れようとしたのはこれ↓
https://github.com/ntk148v/hugo-toigian

最終的に無事動きました。
問題だったのはnpmだったらしいです。

# 紆余曲折
さくっと確認しようとして
```
hugo server -DF --disableFastRender
```
なんだか下記のエラーが出てビルドが止まってしまいました。
```
hugo v0.102.0-0ff4a9326fd8ac1deb7245461bc4a56d94d0c40b windows/amd64 BuildDate=2022-08-28T16:29:34Z VendorInfo=gohugoio
ERROR 2022/11/07 23:02:05 POSTCSS: failed to transform "css/light.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2022/11/07 23:02:05 POSTCSS: failed to transform "css/dark.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Error: Error building site: POSTCSS: failed to transform "css/toigian.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

```

いまのhugoのバージョンじゃまずいのか？　と思って、githubに記載されている環境を確認。
0.93なのに対してこちらは0.102なので問題なさそう。
npm install postcss-cliしろとか言われたので、[こちら](https://blog.dododori.com/create/program/cannot-find-module-postcss/)を参考に下記を実行。

```
npm install postcss-cli
```
↓

```
npm notice
npm notice New minor version of npm available! 8.1.0 -> 8.19.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.3
npm notice Run npm install -g npm@8.19.3 to update!
npm notice
```
なんかnpmのバージョン上がった？？？
という困惑をしつつ再度実行。  
  
 　
  
エラーが変わりました！  

```
 POSTCSS:failed to transform "css/dark.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import'
Require stack
```
今度はpostcss-importがないとのこと。
[こちら](https://blog.dododori.com/create/program/cannot-find-module-postcss/)を参考に下記コマンドを実行。

```
npm install postcss -D
```
そんでもっかい実行。

　

また別のエラーが出ました。
```
 POSTCSS: failed to transform "css/dark.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import'
Require stack:
```
今度はpostcss-importがないとのこと。
もはやpostcss一括なかったとかいうオチだったのでは？

[こちら](https://www.npmjs.com/package/postcss-import)を参考に下記コマンドを実行。
```
npm install -D postcss-import
```
で、再度実行。

 　

案の定エラーが出ました。
そろそろ終わらんかな……。

```
POSTCSS: failed to transform "css/light.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss/nesting'
```
今度はtailwindcss/nestingがないと言われました。
またしてもpostcssですよ！

[こちら](https://bobbyhadz.com/blog/javascript-cannot-find-module-tailwindcss)を見て、下記コマンドを実行。

```
npm install -D tailwindcss postcss autoprefixer
```
で、再度実行。

　

……。
…………………。
！！！！

```
Start building sites …
hugo v0.102.0-0ff4a9326fd8ac1deb7245461bc4a56d94d0c40b windows/amd64 BuildDate=2022-08-28T16:29:34Z VendorInfo=gohugoio

                   | EN
-------------------+-----
  Pages            |  6
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  8
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 8131 ms
```

成功しました。

やったね！
npmよくわかってないのですが、ひとまずビルド出来たので満足です。
おしまい。