记,run build 时,postcss-value-parser/stringify.js 中 node.type 报错,node 是 undefined 导致抛出错误

错误信息:UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'type' of undefined.

提示报错插件及位置:postcss-value-parser@3.3.1, postcss-value-parser/stringify.js

postcss-value-parser 将css值转换成json格式内容.

// For example, parsing the value rgba(233, 45, 66, .5) will return the following:
{
  nodes: [
    {
      type: 'function',
      value: 'rgba',
      before: '',
      after: '',
      nodes: [
        { type: 'word', value: '233' },
        { type: 'div', value: ',', before: '', after: ' ' },
        { type: 'word', value: '45' },
        { type: 'div', value: ',', before: '', after: ' ' },
        { type: 'word', value: '66' },
        { type: 'div', value: ',', before: ' ', after: '' },
        { type: 'word', value: '.5' }
      ]
    }
  ]
}

解决定位是css值在处理时发生的错误,导致无法将css值转化成json, 从代码中发现,写动画animation时,rotate3d(x, y, z, deg); 漏了第4个参数,导致转换失败。但是在开发模式中却能正常旋转:(

写animation时,习惯用translate3d, rotate3d, scale3d, matrix3d 等3d,因为浏览器会开启GPU加速,让动画更顺畅丝滑。

记录本次避免踩坑。


End

posted @ 2021-02-21 10:02  胖虎西西  阅读(246)  评论(0编辑  收藏  举报