React项目使用Sass时resolve-url-loader构建失败问题求助

以下是针对该错误的具体解决方案：

• 调整依赖版本兼容
  该错误多因resolve-url-loader与source-map包版本不兼容导致，卸载现有版本后安装兼容组合：

  npm uninstall resolve-url-loader source-map
  npm install resolve-url-loader@4.0.0 source-map@0.7.3 --save-dev
  

  若使用Yarn：

  yarn remove resolve-url-loader source-map
  yarn add resolve-url-loader@4.0.0 source-map@0.7.3 --dev
  

• 确保sourceMap配置正确

  • 自定义Webpack配置：检查sass-loader、css-loader和resolve-url-loader的sourceMap选项均设为true，示例配置：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(sass|scss)$/,
            use: [
              'style-loader',
              { loader: 'css-loader', options: { sourceMap: true } },
              { loader: 'resolve-url-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { sourceMap: true } }
            ]
          }
        ]
      }
    };
    

  • Create React App项目：确保安装的是sass而非已废弃的node-sass，执行：

    npm uninstall node-sass
    npm install sass --save-dev
    

• 清理缓存并重新构建
  清除旧依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

  重启开发服务器：

  npm start
  

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