Webpack构建项目时出现sass.dart.js中navigator.userAgent未定义错误

这个报错的核心原因是：dart-sass在Node.js环境（webpack构建基于Node环境运行）中尝试访问浏览器专属的navigator对象，但Node.js全局环境不存在该对象，导致navigator.userAgent触发undefined的读取错误。

以下是几种可行的解决方案：

• 方案1：用webpack的DefinePlugin模拟全局navigator.userAgent
  在项目的webpack.config.js中添加DefinePlugin，给navigator.userAgent定义一个模拟值，避免代码读取到undefined：

const webpack = require('webpack');

module.exports = {
  // 其他已有的配置项...
  plugins: [
    // 其他已有的插件...
    new webpack.DefinePlugin({
      'navigator.userAgent': JSON.stringify('webpack-build-env')
    })
  ]
};

• 方案2：在项目入口文件全局模拟navigator对象
  在项目的入口JS文件（比如src/main.js）最顶部添加以下代码，提前给Node环境补全navigator全局对象：

if (typeof navigator === 'undefined') {
  global.navigator = { userAgent: 'node-env' };
}

• 方案3：检查并调整sass相关依赖版本
  如果上述方法无效，确认sass-loader、sass（dart-sass）和webpack的版本兼容性：
  1. 卸载现有依赖：npm uninstall sass sass-loader
  2. 安装适配当前webpack版本的指定版本，比如针对webpack 5的组合：npm install sass@1.69.0 sass-loader@13.3.2 --save-dev
     （版本号可根据实际webpack版本调整，优先选择官方文档推荐的兼容版本）

完成配置修改后，重新执行webpack --mode production即可验证问题是否解决。

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