Nuxt.js集成SurveyJS升级后CSS解析报错问题求助

问题场景 #

基于Nuxt.js的项目集成SurveyJS，原导入代码如下：

import {SurveyCreator} from "survey-creator-knockout";
import {ICreatorOptions, localization} from "survey-creator-core";
import "survey-creator-core/survey-creator-core.min.css";
import "survey-core/defaultV2.css";
import "survey-creator-core/survey-creator-core.i18n";

此前使用survey-vue-ui和survey-creator-knockout 1.9.79版本运行正常，升级至1.9.90后Nuxt构建失败，但开发服务可正常启动。

报错详情 #

构建时抛出如下错误：

Module build failed (from ./node_modules/postcss-loader/src/index.js):
JisonParserError: Parse error on line 1:
1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px)))
--------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

报错指向SurveyJS CSS中的嵌套calc变量行：

.sv-action-bar--default-size-mode .sv-action-bar-item {
    height: calc(5 * var(--base-unit, 8px));
    font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px)))); /* <-- 报错行 */
    line-height: calc(3 * var(--base-unit, 8px));
    margin: 0 calc(1 * var(--base-unit, 8px));
}

已尝试的无效操作 #

• 确认CSS语法、括号嵌套无问题
• 回退至1.9.79版本并清理node_modules重装依赖，报错仍存在
• 搜索相关报错未找到有效解决方案

解决方案 #

方案1：升级PostCSS相关依赖 #

该报错源于旧版PostCSS（或其插件postcss-calc）无法正确解析嵌套在var fallback中的calc表达式。执行以下命令升级依赖：

npm install postcss@latest postcss-loader@latest postcss-calc@latest --save-dev

方案2：调整Nuxt的PostCSS配置 #

在nuxt.config.js中修改PostCSS配置，让postcss-calc保留原生calc语法（交给浏览器处理），而非提前编译：

export default {
  build: {
    postcss: {
      plugins: {
        'postcss-calc': {
          preserve: true
        }
      }
    }
  }
}

如果项目中没有显式依赖postcss-calc，可以尝试替换PostCSS解析器为更兼容的版本：

export default {
  build: {
    postcss: {
      options: {
        parser: require('postcss-default-parser')
      }
    }
  }
}

方案3：彻底清理缓存并重新安装依赖 #

回退版本后报错仍存在，大概率是缓存残留导致。执行以下操作：

# 清理Nuxt缓存
npx nuxt clean
# 清理npm缓存
npm cache clean --force
# 删除node_modules和lock文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm ci

内容的提问来源于stack exchange，提问作者androkettle