Rails 6+Webpacker项目中webpack-import-glob-loader无法处理.scss文件

1. 检查Loader执行顺序 #

webpack loader是从右到左执行的，webpack-import-glob-loader必须在sass-loader之前处理文件（先把通配符展开为具体路径，再交给Sass解析）。确保你的config/webpack/environment.js配置顺序正确：

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

// 在已有的sass loader规则末尾添加glob loader（保证执行优先级更高）
environment.loaders.get('sass').use.push('webpack-import-glob-loader');

module.exports = environment;

2. 修正导入路径 #

你已将webpacker的source_path设为app/assets，意味着app/assets是webpack的根查找目录。当前你写的@import "stylesheets/variables/**/*.scss"多了一层stylesheets前缀——因为stylesheets本身就在app/assets下，直接写@import "variables/**/*.scss"即可。

如果单独导入@import "stylesheets/variables/colors.scss"能成功，说明app/assets/stylesheets被加入了webpack的解析路径，此时通配符导入也应该去掉stylesheets前缀。

3. 补充Webpack Resolve配置 #

确保webpack能正确识别样式文件目录，在config/webpack/environment.js中添加resolve规则：

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

environment.config.merge({
  resolve: {
    modules: [path.resolve(__dirname, '../../app/assets/stylesheets'), 'node_modules'],
    alias: {
      'styles': path.resolve(__dirname, '../../app/assets/stylesheets')
    }
  }
});

// 保持glob loader配置
environment.loaders.get('sass').use.push('webpack-import-glob-loader');

module.exports = environment;

之后可以用更简洁的别名导入：@import "styles/variables/**/*.scss"

4. 验证依赖版本兼容性 #

Rails 6的webpacker对应webpack 4.x版本，确保依赖版本适配：

• webpack-import-glob-loader建议安装^1.7.2
• sass-loader建议安装^9.0.3（适配webpack 4）
• sass建议安装^1.32.x及以上

重新安装依赖：

yarn add webpack-import-glob-loader@^1.7.2 sass-loader@^9.0.3 sass --dev

5. 清理缓存重新构建 #

缓存可能导致路径解析异常，执行以下命令清理后重试：

rm -rf tmp/cache/webpacker
./bin/webpack --clean
./bin/webpack

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