完美解决：Hexo Next主题本地可预览CSS，但部署到网站CSS失效问题！

我的Hexo博客，欢迎访问，酷炫得一批。柯摩的BLOG

🌟 前言

  我的Hexo版本是3.9.0，Next主题版本是7.5版本，也就是移除了custom文件的神奇的跨时代的版本。
  我的服务器不是github-page，而是阿里云的ECS服务器，关于如何将Hexo从github-page迁移到阿里云的ECS服务器请看这篇文章：将博客部署到阿里云服务器上。
  当然一开始觉得这个版本好搓卡，本来想改改样式，不会CSS，上网搜搜就有很多改custom文件的文章，复制复制就可以改成很好看的样式，这下好了，一移除就全部失效了。
  其实不然，在与Next的大坑中摸爬滚打了很久后，
  发现，你可以在themes/next/source/css/main.styl中最后加上一句：

@import "_custom/custom";

  然后再在themes/next/source/css目录下新建_custom文件夹，再进去新建custom.styl文件，将网上搜罗到的Next主题的文件都粘贴进去，就可以在本地预览这些新添加的样式了。

  🙆当然你也许不需要这么麻烦的操作，你甚至可以在themes/next/source/css文件夹中的任何一个.styl文件添加你想要的css样式代码都可以在本地预览中生效。

  我想其中的原因在于：主题调用的文件主要来自于themes/next/source/css/main.styl，而这个文件里面全是import语句，即将所有的css文件import进来，也就意味着最后生成的整体的main.css文件不过是将所有的css分文件中的语句按顺序排列罢了，所以你加在哪个文件改变的不过是最后的main.css的语句顺序罢了，但是其提供的效果依然生效。但为了日后修改方便，还是建议找对应的位置添加。

1️⃣ 问题陈述

  前言中我也提到了“本地预览生效”的话，意味着，你大可自己定义css样式，也可以将网上的内容复制粘贴，但有一点非常头疼，那就是大多数情况下，你只能成功地进行本地预览，而一旦deploy到服务器上要么就是完全无效，要么就是稀奇古怪，甚至有时候你即使将整个/css文件夹删除，发现deploy后的网站样式完全没有变化。😢

  紧接着通过在部署后的页面以及本地预览的页面分别进行F12调试，逐一对比，终于发现了不一样的地方。本地预览时调试页面的/css的文件下的文件名为main.css就跟hexo g生成在/public文件夹下是一模一样的，但是到了部署页面中这个文件名就变为了main.css?v=7.3.0，这多出来的?v=7.3.0百思不得其解。再看看main.css中的文件内容跟我pc里面的/public/css/main.css里面的东西一模一样，但是main.css?v=7.3.0里面莫名其妙的少了几百行，原以为是hexo deploy命令部署的不全，漏了东西，但上阿里云的服务器文件夹里面一看内容跟我本地的一样。并且当我将main.css里面的东西复制到main.css?v=7.3.0时，我想要的部署的页面就跟我本地预览终于一样了，虽然刷新一下就没了，毕竟是网页调试。

  那么问题就很清楚了，就是这个main.css?v=7.3.0并不放在服务器端，调用的源头也并不明朗，而且是无法更改的，所以得想办法让部署的页面加载main.css而不是main.css?v=7.3.0。

2️⃣ 问题解决

  既然知道问题出在哪里就很简单了，费了一番功夫，终于发现在themes/next/layout/_partials/head/head.swig文件中，有一行语句是这样的：

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css?v={{ version }}">

  很明显之前多出来的?v=7.3.0就是出自于这里的?v={{ version }}，所以就把这里的?v={{ version }}删除，就可以了。

然后再hexo clean && hexo g && hexo d，查看部署端页面，样式齐全完美！问题解决。👍👍👍

3️⃣ 一些缺点

  这个方法可以完美地解决问题本身，而且绝对不会再出现本地预览与部署端不一样的问题，但是会出现副作用。

  当我以为终于可以愉快地肆无忌惮地玩耍时，又发现一个新的问题。就是我又再次改造了css样式，即在/_custom/custom文件中加入了一些样式，再hexo d发现样式没有变化。再调试发现问题，main.css文件没有变化。思考一下，猜测这个原因应该跟main.css?v=7.3.0问题是一样的，它本身是不可更改的，即使再hexo d新的css文件，其本身不会变化。

  问题的解决方法就是将themes/next/layout/_partials/head/head.swig中的

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css">

改为

<link rel="stylesheet" href="{{ url_for(theme.css) }}/main1.css">

  也就是改成其他名字main1也好main2也好，就是改成跟原来不用的名字。然后继续hexo g就会将生成的那些博客文章页面里面的引用的css文件名改为main1.css文件。

  同时还要将/public/css中的main.css改为main1.css，最后hexo d，发现改动的css样式也生效了。

  当然这也就意味着，以后每次改动css样式，都要将main.css改成新的名字，如main2.css、main3.css…。

  建议hexo clean && hexo g && hexo d之前，先备份一下/public文件夹，保留可以回退版本的可能。

  所以建议要么不改css，要么一次性改全。毕竟写Hexo博客，重要的不是好看，而是内容，不是嘛？😉

4️⃣ 总结

• 删除themes/next/layout/_partials/head/head.swig中的main.css?v={{ version }}后面的?v={{ version }}
• 每次修改css后，hexo d之前，改造themes/next/layout/_partials/head/head.swig中的main.css的名字，如main2.css、main3.css…。
• 建议hexo clean && hexo g && hexo d之前，先备份一下/public文件夹，保留可以回退版本的可能。