RoR+React项目集成Material UI时Sass-Loader构建失败求助

1. 修复resolve-url-loader的配置警告 #

你在config/webpack/environment.js里使用了已废弃的attempts选项，这正是警告的源头。新版本的resolve-url-loader已经移除了这个参数，直接删掉即可：

const { environment } = require('@rails/webpacker')
// 移除废弃的attempts选项，resolve-url-loader会使用默认行为
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});
module.exports = environment

另外要注意：resolve-url-loader正常工作的前提是它和sass-loader都开启了sourceMap，你当前的版本组合（resolve-url-loader@3.1.0 + sass-loader@7.1.0）是兼容的，只需确保两者的sourceMap配置都保持开启状态。

2. 解决Sass变量未定义错误（$white-color） #

这个错误说明_plugin-react-datetime.scss找不到定义$white-color的变量文件。Material Kit React的变量通常定义在assets/scss/_variables.scss这类文件中，你可以通过两种方式解决：

• 方法一：手动导入变量文件
  在_plugin-react-datetime.scss的顶部添加导入语句（路径根据你的实际目录结构调整）：

@import "../variables";

• 方法二：配置全局自动导入
  修改config/webpack/environment.js，让sass-loader自动导入变量文件，避免每个SCSS文件都手动写导入：

const { environment } = require('@rails/webpacker')
const path = require('path')

// 获取现有sass-loader的配置
const sassLoader = environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader');
sassLoader.options = {
  ...sassLoader.options,
  sourceMap: true,
  // 自动导入变量文件，路径请根据实际项目调整
  data: `@import "${path.resolve(__dirname, '../../app/javascript/components/assets/scss/_variables.scss')}";`
};

// 配置resolve-url-loader（必须放在sass-loader之前）
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    sourceMap: true
  }
});

module.exports = environment

3. 清理冲突的Webpack配置 #

你同时维护了根目录的webpack.config.js和Webpacker的environment.js，这两个配置很可能冲突——RoR默认使用Webpacker的配置体系，根目录的webpack.config.js除非手动指定，否则不会被加载。

建议：

• 删除根目录的webpack.config.js，统一使用Webpacker的配置扩展方式，避免配置混乱。
• 如果确实需要自定义配置，全部通过config/webpack/environment.js来修改，不要单独创建独立的webpack配置文件。

4. 最终验证步骤 #

完成上述修改后，执行以下操作清理依赖和缓存：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新编译node-sass
npm rebuild node-sass
# 重启rails server和webpack dev server

这样应该就能解决你的SCSS编译问题了。

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