Webpack无法找到@rails/webpacker提供的sass-loader问题求助

针对你遇到的情况，Webpack无法识别@rails/webpacker/node_modules下的sass-loader，可以尝试以下几种方案：

方案一：本地安装sass-loader（最直接） #

直接在项目根目录安装sass-loader和依赖的sass，让Webpack能在项目根node_modules下找到它，避免依赖webpacker自带的版本：

# 使用Yarn
yarn add sass-loader@^8.0.2 sass --dev

# 或者使用npm
npm install sass-loader@^8.0.2 sass --save-dev

注意：Webpack 4.x需要搭配sass-loader 8.x版本（更高版本对应Webpack 5），确保版本兼容，否则会出现新的兼容性错误。

方案二：扩展Webpack的模块查找路径 #

在config/webpack/environment.js中，将sass-loader所在的目录添加到Webpack的模块查找列表里，让Webpack主动去该目录搜索模块：

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

// 扩展模块查找路径
environment.config.merge({
  resolve: {
    modules: [
      // 项目根node_modules
      path.resolve(__dirname, '../../node_modules'),
      // webpacker自带的node_modules目录
      path.resolve(__dirname, '../../node_modules/@rails/webpacker/node_modules')
    ]
  }
});

module.exports = environment;

路径说明：environment.js默认在config/webpack目录下，所以../../node_modules对应项目根目录的node_modules，再逐级指向webpacker内部的node_modules。

为什么之前的别名配置无效？ #

sass-loader作为Webpack的loader模块，其查找逻辑和普通业务模块不同，Webpack在解析loader时不会直接应用resolve.alias的配置，所以别名设置无法生效。

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