Webpack cannot find sass-loader provided by @rails/webpacker

Question

When I try to import an scss file in my Vue component:

import './my_scss_file.scss';

I get an error that says:

Module not found: Error: Can't resolve 'sass-loader'
// ...
[/home/app/node_modules]
[/home/node_modules]
[/node_modules]
[/home/app/web/node_modules/sass-loader]
[/home/app/web/node_modules/sass-loader.js]
[/home/app/web/node_modules/sass-loader.json]

As shown above, webpack tries to find sass-loader directly in node_modules. However, I found that my sass-loader module actually lives elsewhere:

/home/app/web/node_modules/@rails/webpacker/node_modules/sass-loader

How can I indicate to webpack where to find this sass-loader?

I'm on Rails 6.1, webpacker 4.3.0, webpack 4.41.2.

I tried adding a resolve alias to my environment.js to no avail:

sass_loader = {
  resolve: {
    alias: {
      'sass-loader': '@rails/webpacker/node_modules/sass-loader'
    }
  }
};
environment.config.merge(sass_loader);

Answer 1

If you use a library directly - it's better to have a direct dependency on it and not rely on some other library to add a dependency (which it may cease to do in the future)

Add sass-loader to your package.json via yarn add sass-loader (or manually and then run yarn install) and you'll have it in node_modules

Answer 2

try changing resolve.alias to resolve.modules

const sass_loader = {
  resolve: {
    modules: [
      'node_modules/@rails/webpacker/node_modules',
    ],
  },
};
environment.config.merge(sass_loader);

Then restart your development server.