关于Hexo在Windows平台下无法正常加载CSS的问题

发表于 分类于 Waline：


咱以前的hexo环境都直接全部丢Github上使用Actions CI/CD了构建了

今早将Hexo环境重新在部署在windows上，便于本地调试，结果一运行 hexo g ，好家伙，一大串全是红色error，我人都麻了😒，大概就是说无法渲染，或者无法访问文件，本以为是自己的问题，把一些自定义文件删掉，直接给我提示 main.css 无法渲染了？？？本以为是Node.Js版本过高的问题，又卸载Node.Js回退到 12.x 依然完全没变化。到GitHub Issue一看，第一条 就是和我一样的问题

报错信息

就这样亿点点报错信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
`ERROR {
err: OperationalError: D:\code\hexo\test\node_modules\hexo-theme-landscape\source\css\style.styl:90:29 86| @import "_partial/highlight"
87| @import "_partial/mobile"
88|
89| if sidebar
90| @import "_partial/sidebar"
-----------------------------------^

failed to locate @import file D:\code\hexo\test\node_modules\stylus\lib\functions\index.styl

  at Evaluator.visitImport (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:915:21)
  at Evaluator.Visitor.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\index.js:28:40)
  at Evaluator.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:160:18)
  at Evaluator.visitRoot (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:707:27)
  at Evaluator.Visitor.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\index.js:28:40)
  at Evaluator.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:160:18)
  at Evaluator.evaluate (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:247:15)
  at Renderer.render (D:\code\hexo\test\node_modules\stylus\lib\renderer.js:86:26)
  at Hexo.stylusFn (D:\code\hexo\test\node_modules\hexo-renderer-stylus\lib\renderer.js:59:6)
  at Hexo.tryCatcher (D:\code\hexo\test\node_modules\bluebird\js\release\util.js:16:23)
  at Hexo.ret (eval at makeNodePromisifiedEval (D:\installation\nodejs\node_global\node_modules\hexo-cli\node_modules\bluebird\js\release\promisify.js:184:12), <anonymous>:13:39)
  at D:\code\hexo\test\node_modules\hexo\lib\hexo\render.js:81:22
  at tryCatcher (D:\code\hexo\test\node_modules\bluebird\js\release\util.js:16:23)
  at Promise._settlePromiseFromHandler (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:547:31)
  at Promise._settlePromise (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:604:18)
  at Promise._settlePromise0 (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:649:10)
  at Promise._settlePromises (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:729:18)
  at _drainQueueStep (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:93:12)
  at _drainQueue (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:86:9)
  at Async._drainQueues (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:102:5)
  at Immediate.Async.drainQueues [as _onImmediate] (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:15:14)
  at processImmediate (internal/timers.js:464:21) {
cause: Error: D:\code\hexo\test\node_modules\hexo-theme-landscape\source\css\style.styl:90:29
   86| @import "_partial/highlight"
   87| @import "_partial/mobile"
   88|
   89| if sidebar
   90|   @import "_partial/sidebar"
-----------------------------------^

failed to locate @import file D:\code\hexo\test\node_modules\stylus\lib\functions\index.styl

    at Evaluator.visitImport (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:915:21)        at Evaluator.Visitor.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\index.js:28:40)
    at Evaluator.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:160:18)
    at Evaluator.visitRoot (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:707:27)
    at Evaluator.Visitor.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\index.js:28:40)
    at Evaluator.visit (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:160:18)
    at Evaluator.evaluate (D:\code\hexo\test\node_modules\stylus\lib\visitor\evaluator.js:247:15)
    at Renderer.render (D:\code\hexo\test\node_modules\stylus\lib\renderer.js:86:26)
    at Hexo.stylusFn (D:\code\hexo\test\node_modules\hexo-renderer-stylus\lib\renderer.js:59:6)
    at Hexo.tryCatcher (D:\code\hexo\test\node_modules\bluebird\js\release\util.js:16:23)
    at Hexo.ret (eval at makeNodePromisifiedEval (D:\installation\nodejs\node_global\node_modules\hexo-cli\node_modules\bluebird\js\release\promisify.js:184:12), <anonymous>:13:39)
    at D:\code\hexo\test\node_modules\hexo\lib\hexo\render.js:81:22
    at tryCatcher (D:\code\hexo\test\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:547:31)
    at Promise._settlePromise (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:604:18)        at Promise._settlePromise0 (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (D:\code\hexo\test\node_modules\bluebird\js\release\promise.js:729:18)
    at _drainQueueStep (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:93:12)
    at _drainQueue (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:86:9)
    at Async._drainQueues (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (D:\code\hexo\test\node_modules\bluebird\js\release\async.js:15:14) '\n' +
  '@import "_extend"\n' +
  '@import "_partial/header"\n' +
  '@import "_partial/article"\n' +
  '@import "_partial/comment"\n' +
  '@import "_partial/archive"\n' +
  '@import "_partial/footer"\n' +
  '@import "_partial/highlight"\n' +
  '@import "_partial/mobile"\n' +
  '\n' +
  'if sidebar\n' +
  '  @import "_partial/sidebar"' }}
  Asset render failed: %s css/style.css`

问题起因

windows uses either “/” or “\” as its path separator

所以大概就是hexo开发者都是在非Windows上开发的吧💩 (瘟抖10，瘟抖11，狗都不用)

解决方案

https://github.com/hexojs/hexo/issues/4968#issuecomment-1126828530

在package.json中加入

1
2
3
"overrides": {
  "glob": "7.2.0"
}

然后执行npm i就能安装glob了

node-glob是一个匹配规则模块，它能对Windows下的 / or \ 都用**\**处理

更多使用实例：https://cloud.tencent.com/developer/article/1752854

最后，还是Linux大法好（