Nuxt项目scss加载器异常 部署阶段postcss语法错误如何解决

问题根因 #

你看到的报错并非sass加载器未生效，从报错的loader调用链css-loader → postcss-loader → sass-loader可以看出sass已经正常执行，问题出在postcss的postcss-custom-properties插件无法识别未包裹在calc内的CSS变量除法写法，本地和服务器表现不一致通常是依赖版本漂移导致的。

解决方案 #

按优先级从高到低尝试以下操作：

• 对齐本地与服务器依赖版本
  确认本地的package-lock.json或yarn.lock已同步到服务器代码仓库，部署时执行npm ci（而非npm install）安装依赖，完全对齐本地依赖版本，避免子依赖自动升级导致的兼容性问题。

• 修正CSS运算写法
  将报错位置的CSS变量除法包裹进原生calc函数，符合CSS标准语法的同时可兼容所有postcss版本：

/* 原写法 */
font-size: var(--font-size-2)/var(--font-ratio);

/* 修正后写法 */
font-size: calc(var(--font-size-2) / var(--font-ratio));

• 调整postcss插件配置
  如果不想修改业务代码，可在nuxt.config.js中关闭postcss-custom-properties的严格校验：

// nuxt.config.js
export default {
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': {
          strict: false
        }
      }
    }
  }
}

• 检查自定义loader配置
  若你在nuxt.config.js的build.extend中手动修改过loader规则，确认sass-loader的执行顺序在postcss-loader之前，避免自定义配置覆盖Nuxt默认的loader处理逻辑。

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