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

最新推荐文章于 2025-06-02 08:00:00 发布

原创最新推荐文章于 2025-06-02 08:00:00 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

开发者在使用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' 这种形式;