修复less升级到4.0+版本导致的页面异常

  1. 1. 背景
  2. 2. 定位
  3. 3. 修复

背景

顺shou手jian升级了下博客的Hexo版本和依赖的npm包,重新渲染了一遍博客发现页面元素都错位了。看来是某个依赖包有breaking-changes。

1
2
3
4
5
6
7
8
9
10
11
12
13
PS > npm-check-updates -u
Upgrading C:\Users\rayle\OneDrive\桌面\AxisRay.github.io\package.json
[====================] 16/16 100%

hexo ^5.4.0 → ^6.0.0
hexo-generator-json-content ^4.1.6 → ^4.2.3
hexo-renderer-ejs ^1.0.0 → ^2.0.0
hexo-renderer-less ^2.0.2 → ^4.0.0
hexo-renderer-marked ^4.1.0 → ^5.0.0
hexo-renderer-stylus ^2.0.0 → ^2.0.1
hexo-server ^2.0.0 → ^3.0.0

Run npm install to install new versions.

定位

经过简单的检索,应该是hexo-renderer-less-4.0.0,这个npm包引入的问题。其更新说明中提示less更新到了4.1.2版本,而在less的4.0版本的更新说明中提示引入了两个会破坏向前兼容的两个特性。
第一个特性:

Parentheses required for mixin calls
This aligns it with syntax for calling detached rulesets.

这个检查了下,模板中并没有关于mixin的引用,可以排除

第二个特性:

Parens-division now the default math setting
Parentheses are required (by default) around division-like expressions, to force math evaluation.

看来是这个特性导致的了。根据其说明,对于数学计算(math),默认选项从always变成了parens-division
具体变化就是,在less中进行除法计算,不能单纯的使用斜杠(/),而是必须使用圆括号括起来,例如(2px / 2),或者使用./,例如2px ./ 2。但是需要注意的是./也过时(deprecated)了,即可能在未来的版本中移除,还是不要用的好。

修复

知道了问题原因,剩下的就是怎么修复了。根据说明,我们有两种选择,要么把所有的除法运算全部按要求改过来,要么把math的选项从默认的parens-division改回always。考虑到模板里面除法计算的地方比较多,我决定还是用采用后者办法。
根据hexo-renderer-less说明文档,可以在模板中的配置文件_config.yml中设置less的渲染/编译选项。
这里按下列方式在模板的配置文件_config.yml中增加相关的选项,问题即可解决。

1
2
3
4
5
6
7
8
...
# Less
less:
options:
# fix breaking changes in less 4.0+
# https://github.com/less/less.js/releases/tag/v4.0.0
math: always
...