文件改了，页面没变）

有一种情况挺迷惑的：CSS 已经保存了，本地页面也能打开，但刚改的样式就是没出现。

看着源文件里的代码，再看看浏览器……难道我改的是另一个博客？

先怀疑一下自己也不是不行

我这个博客有一点额外的处理：自定义的 CSS 和 JS 会合并成两个文件，页面加载的是这两个合并包。所以源文件改了以后，还得把合并包重新生成一遍。

顺手记一下，免得下次又对着没变化的页面发呆。

页面实际读的是哪份文件

博客基于 Hexo 和 Butterfly，自己加的样式放在 source/css/，脚本放在 source/js/。

文件多了以后，就加了一步合并，减少一些资源请求。页面里引用的主要是：

1
2
<link rel="stylesheet" href="/css/custom-bundle.css">
<script src="/js/custom-bundle.js"></script>

比如改了 source/css/custom.css，真正需要更新的还有 public/css/custom-bundle.css。

源文件是新的，不代表浏览器正在读的那一份也是新的。

只启动 server，少了一步

本站的构建命令是这样的：

1
2
3
{
  "build": "hexo generate && node scripts/merge-assets.js && node scripts/cache-bust.js"
}

前面是 Hexo 生成页面，后面两步是博客自己加的处理：合并资源，以及给资源引用加版本号。

但直接启动 hexo server，不会顺带执行后面这两个脚本。于是可能出现两种情况：第一次预览时，合并包还没生成；之前构建过的话，页面读到的还是旧包。

所以我这里的预览顺序是：

1
2
npm run build
npm run server

之后再改自定义样式，也需要重新 build。还有一个容易忘的地方：改了 _config.butterfly.yml，要重启 server，配置不会直接热更新。

这套流程是本站额外加的，如果你的 Hexo 项目直接引用单个 CSS 文件，情况可能就不一样了。

新文件也得登记一下

还有一种情况是，原来的样式都正常，只有新加的那份没效果。

合并脚本没有自动把文件夹里的所有东西都塞进去，而是按清单读取文件。新增文件以后，需要在 scripts/merge-assets.js 的 CSS_FILES 或 JS_FILES 里登记路径。

比如新加了一个样式文件，清单里就得有这一项：

1
'/css/example.css',

这里用的是生成后的资源路径，不是 source/css/example.css。

文件放进文件夹了，但还没被点名，属于是白来了

现在清单里如果写了一个不存在的文件，构建会直接报错并指出路径。比起带着少一块的样式继续生成页面，这样反而更容易找到问题。

最后再看看缓存

合并包已经更新，页面还是旧效果的话，再看看浏览器缓存。

本站构建后会根据 CSS、JS 的文件内容给引用加一个版本号，大概长这样：

1
/css/custom-bundle.css?v=一段由文件内容计算出的值

文件内容变了，这个值也会变，浏览器就能请求新的资源。

以后遇到样式没出现，我会先看页面实际加载的文件，再确认合并包有没有更新、新文件有没有登记，最后看缓存。

至少不用一上来就怀疑自己 CSS 又写错了）