Moussawi7 Moussawi7 - 2 months ago 29
Sass (Sass) Question

Webpack: cannot resolve module 'file-loader'

When I try to build SASS file with webpack, I got the following error:

Module not found: Error:Cannot resolve module 'file-loader'

note that this issue only happen when i try to load background image using relative path.

this Work fine:


this cause the issue:


and this is my project structure

  • images

  • styles

  • webpack.config.js

and this is my webpack file:

var path = require('path');
module.exports = {
entry: {
build: [
output: {
path: path.join(__dirname, 'public'),
publicPath: 'http://localhost:8080/',
filename: 'public/[name].js'
module: {
loaders: [
{test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
{test: /\.scss$/, loaders: ['style', 'css', 'sass']},
{test: /\.(png|jpg)$/, loader: 'file-loader'},
{test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'}
resolve: {
extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']


As @silvenon said in his comment:

Do you have file-loader installed?

yes file-loader was installed but broken, and my issue has been solved by re-installing it.