CSS 踩坑记

速打一下存个档，否则我肯定会在同样的坑里摔第二次……

前几天做了个博客问卷还说我不折腾外观，打脸真是来得如此猝不及防。

之前我这个主题是 plain CSS，改动起来很方便，中途主题升级过一次，我眼馋 archive 页的新设计就更新了，当时就发现虽然样式生效但如果我想微调，不管是动 assets/css 还是 theme/css 文件夹都没用，无法改全局 CSS 最后只好改 layouts 或者在单一页面里加 <style>。总之就是凑合了好久，最近我非常想把正文的引用 italic 格式取消，但找遍文件夹里的 CSS 文件怎么改都不行，非常抓狂。

中间血泪的踩坑过程就不说了，一圈儿试下来才发现不管动了什么，Hugo 最后实际使用的都是 themes/bento/resources/_gen/ 这个文件夹里某个带 hash 值后缀的 CSS。然后我才意识到，作者新写的 styles.css 是用了 Tailwind CSS 和 PostCSS，当初看到 styles.css 和 head.html 这俩文件的内容我就应该先查查 PostCSS 和 Tailwind CSS 是个什么玩意儿的……真是纯属没苦硬吃（扶额）。

简而言之就是要有两个程序（？）把这些内容加工一遍才能生成一个最终被 public 采用的 styles.css 文件，而我的 Hugo 项目下并没安装相关的 npm packages，不管如何动 CSS，Hugo 根本不处理那当然改动就不会生效！

/* Tailwind base - put variables under: tailwind.config.js */
@import "node_modules/tailwindcss/base";

/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";

/* Site Specific */
@import "assets/css/site";
@import "assets/css/syntax";

/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";

{{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

那后续就好办了，先在 blog 这个文件夹执行一下命令安装相关 package。

npm install postcss postcss-import autoprefixer tailwindcss

但我这个文件夹同时又是 GitHub 仓库，安装后多出来 6000 多文件，git 提醒要爆炸，赶紧把 node_modules 都加到 .gitignore 里。

再 Hugo 试一下，这下真的生成新的 CSS 文件了！但好多遗留问题……说老实话这个主题写得一般，还被我发现了 bug ，最后删除了某个莫名其妙的点阵背景，修改了单篇文章的标题格式，调整 archive 页链接呈现样式，删除正文引用的斜体格式，以及林林总总一大堆，希望这是我最后一次动 CSS……

不过，大概知道 Tailwind CSS 怎么用之后不得不感叹确实简洁多了呀！但我是不会主动学的，以后，以后吧……