gulp-less 编译less 变量一次奇怪的报错

477 阅读1分钟

less 版本 4.1.2

gulp 版本 4.0.2

gulp-less 版本 5.0.0

打包逻辑

function globalStyle ()
{
  return src( `${ INPUT_PATH }/globalStyle/src/style/index.less` )
    .pipe( less() )
    .pipe( dest( `${ OUTPUT_PATH }/globalStyle/style` ) );
}

exports.default = series( globalStyle );

less文件部分代码

@vpx: 100vw/1280;
@heightScreen: @vpx * 800;
@footerHeight:  @vpx * 70;
@contentHeight:  660 * @vpx;
...

报错信息

$ cross-env NODE_ENV=production gulp -f ./build/gulpfile.js
[15:55:14] Working directory changed to D:\zhanglu\project\test\build
[15:55:15] Using gulpfile D:\zhanglu\project\test\build\gulpfile.js
[15:55:15] Starting 'default'...
[15:55:15] Starting 'globalStyle'...
[15:55:15] 'globalStyle' errored after 60 ms
[15:55:15] Error in plugin "gulp-less"
Message:
    Operation on an invalid type in file D:\zhanglu\project\test\packages\globalStyle\src\style\index.less line no. 9
Details:
    type: Operation
    filename: D:\zhanglu\project\test\packages\globalStyle\src\style\index.less
    index: 121
    line: 9
    column: 0
    callLine: NaN
    callExtract: undefined
    extract: @footerHeight:  @vpx * 70;,@contentHeight:  660 * @vpx;,@paddingWidth:  @heightScreen / 17;
    lineNumber: 9
    fileName: D:\zhanglu\project\test\packages\globalStyle\src\style\index.less
    domainEmitter: [object Object]
    domainThrown: false

[15:55:15] 'default' errored after 68 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

发现问题

变量 * number 不会报错 而 number * 变量 会报错,将代码 @contentHeight: 660 * @vpx; 改为 @contentHeight: @vpx * 660; 就正常了,神奇的bug。