React应用生产环境构建时SCSS文件出现解析错误如何解决？

1. 验证Sass依赖兼容性 #

• 目前node-sass已被官方弃用，版本不兼容是SCSS解析错误的高发原因，先卸载node-sass替换为官方推荐的dart-sass（npm包名为sass）：

npm uninstall node-sass
npm install sass -D

• 检查sass-loader版本与webpack版本匹配：webpack 5对应sass-loader@11+，webpack 4对应sass-loader@10.x，版本不匹配会导致语法解析异常。

2. 定位语法错误源 #

报错指向main.scss第1行第25列，对应首行导入语句的末尾位置，优先排查以下两点：

• 确认src/styles/vars/typography.scss文件存在，且文件编码为UTF-8无BOM格式，排除隐形特殊字符导致的解析错误
• 临时注释main.scss中所有导入语句，仅保留一行测试代码$test: #000;重新构建，若报错消失则说明问题出在被导入的.scss文件内部，逐一打开检查即可。

3. 核对构建配置 #

如果是自定义webpack配置的项目，确认SCSS相关loader的执行顺序正确（从右到左执行）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          process.env.NODE_ENV === 'production' ? require('mini-css-extract-plugin').loader : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

如果是create-react-app生成的项目未做eject操作，执行npm run build前先清除缓存：

npx react-scripts build --clean

4. 缓存清理重试 #

如果以上操作都无效，删除本地依赖缓存和构建产物后重试：

rm -rf node_modules package-lock.json build
npm install
npm run build

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