执行Nuxt build出现Sass相关构建错误，dev模式运行正常

问题背景 #

• 项目仓库：gitlab.com/gkurl/vapedcrusader
• Node版本：16.18.1
• 核心问题：执行yarn run build时，postcss-loader解析components/AppNavigation.vue的SCSS代码出现语法错误，但dev模式可正常编译，报错核心为ParserError: Syntax Error at line: 1, column 23，来自postcss-values-parser对CSS自定义属性的解析环节。

排查与解决方案 #

一、定位具体语法错误 #

报错行号是编译后的位置，需找到源码中的问题点：

• 单独提取AppNavigation.vue的<style lang="scss">内容，保存为独立.scss文件，用postcss-cli直接编译排查：

  npx postcss --use postcss-preset-env your-style.scss -o output.css
  

• 重点检查CSS自定义属性（var(--xxx)）的写法：是否存在变量名含非法字符、运算符前后无空格（如calc(var(--foo)+10px)需改为calc(var(--foo) + 10px)）、嵌套变量引用不规范等问题。

二、调整postcss插件版本 #

错误来自postcss-custom-properties的解析逻辑，尝试锁定兼容版本：

1. 在package.json中添加版本锁定：

   "resolutions": {
     "postcss-custom-properties": "^12.1.11"
   }
   

2. 重新安装依赖：

   rm -rf node_modules yarn.lock
   yarn install
   

三、修改Nuxt的postcss配置 #

调整生产模式下的postcss插件行为：

• 在nuxt.config.js中修改build.postcss配置，暂时禁用或调整postcss-custom-properties：

  export default {
    build: {
      postcss: {
        plugins: {
          'postcss-custom-properties': {
            preserve: true, // 保留原始变量，避免编译时解析错误
            // 或直接禁用：false
          }
        }
      }
    }
  }
  

四、排查生产构建的压缩/优化逻辑 #

生产模式的CSS压缩可能引发冲突：

• 临时关闭CSS压缩验证：

  export default {
    build: {
      minimize: false
    }
  }
  

• 如果构建成功，再逐步排查cssnano等压缩插件的配置，调整其与postcss插件的兼容性。

五、清理缓存重新构建 #

缓存可能导致依赖或编译结果异常：

yarn nuxt clean
rm -rf node_modules yarn.lock
yarn install
yarn run build

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