javascript css node.js webpack sass-loader

Webpack - sass loader cannot find images

The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". So i did as it tells, I have my index.html in my project root, then I'm trying to load an image from my scss file. Now I have 2 errors: 1) from Chrome's console: Cannot find module "./img/header.jpg". 2) from my terminal:

ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css
 @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91

webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        filename: './public/js/build/bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: 'babel',
              query: {
                  presets: ['react', 'es2015']
              }
          },
          {
              test: /\.scss$/,
              loaders: ["style", "css", "sass", "resolve-url"]
          },
          {
            test: /\.jpg$/,
            loader: "file?name=[path][name].[ext]"
          }
        ]
    }
};

If I see my code, I can clearly see that my css lives inside <head> so I've pointed my image's path to my root, as documentation says, but still can't fix it.

UPDATE: I've installed file-loader and followed the instructions, now I get this error in console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

Solution

To solve this problem I've uploaded this webpack extremly basic configuration to start my projects, I hope it can help everyone who had this problem. Suggestions are all welcome of course.


var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

var environment = process.env.NODE_ENV || 'development';

module.exports = {
    entry: './src/App.jsx',
    output: {
        filename: './dist/build.js'
    },
    resolve: {
        root: __dirname,
        alias: {
            // Component: 'app/components/Component.jsx',
        },
        extensions: ['', '.js', '.jsx'],
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
            // {
            //     test: /\.jpe?g$|\.gif$|\.png$/i,
            //     loader: "file-loader?name=/img/[name].[ext]"
            // }
            // {
            //     test: /\.otf$/,
            //     loader: "file-loader?name=/fonts/Brown/[name].[ext]"
            // }
        ]
    },
    devtool: 'eval-source-map',
    plugins: [
        new ExtractTextPlugin('./src/css/style.css', {
            allChunks: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(environment)
            }
        })
    ]
};