とあるテーマでビルドが出来なかったので、原因調査をした話。
環境
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しろとか言われたので、こちらを参考に下記を実行。
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がないとのこと。
こちらを参考に下記コマンドを実行。
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一括なかったとかいうオチだったのでは？
こちらを参考に下記コマンドを実行。
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ですよ！
こちらを見て、下記コマンドを実行。
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よくわかってないのですが、ひとまずビルド出来たので満足です。
おしまい。