vue cli css 打包报错记录 calc(100% - NaNvw)

开发者在使用postcss-px-to-viewport处理响应式布局时遇到错误,原因在于误将viewportWidth和viewportHeight配置为字符串而非数值。解决办法是正确设置这两个属性为数值('1080px'形式)。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遇到奇特bug,记录一下

因为要自适应浏览器大小,使用 postcss-px-to-viewport 来进行转换vw

在进行build 打包的时候,报错:

 

Error: CSS minification error: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100% - NaNvw
^.........^. File: css/app.3e4e59d0.css
Error: CSS minification error: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100% - NaNvw
^.........^. File: css/app.3e4e59d0.css
    at /Users/myFile/myWork/小语vue/xiaoyu-vue-web/node_modules/@intervolga/optimize-cssnano-plugin/index.js:106:21
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xiaoyu-vue-web@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xiaoyu-vue-web@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

 

原因在配置 postcss-px-to-viewport 的时候,出了粗 viewportWidth,viewportHeight 两个属性为number,我配置为字符串 : '1080px' 这种形式;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值