Webpack file-loader not exporting images

Question

I am using webpack for my PHP and React project. I want to load a background image from my .scss file with the webpack file-loader but for some reason I don't know, the img -folder does not get copied/exported to my dist -folder. Below is the webpack.config.js:

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin');

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var extractPlugin = new ExtractTextPlugin({
   filename: 'main.css'
});

module.exports = {
   entry: ['babel-polyfill', SRC_DIR + "/app/index.js"],
   output: {
      path: DIST_DIR + "/app",
      filename: "bundle.js",
      publicPath: "/dist"
   },
   watch: true,
   module: {

       rules: [
          {
            test: /\.js$/,
            include: SRC_DIR,
            loader: "babel-loader",
            exclude: /node_modules/,
            query: {
                presets: ["react", "es2015", "stage-2"], plugins: ["transform-decorators-legacy", "transform-class-properties"]
            }
        },
        {
            test: /\.scss$/,
            use: extractPlugin.extract({
                fallback: "style-loader",
                use:  ["css-loader", "sass-loader", "resolve-url-loader"]
              })                
        },
        {
            test: /\.css$/,
            use:  ["css-loader", "sass-loader", "resolve-url-loader"]
        },
        {
            test: /\.(jpg|png)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: 'img/'
                    }
                }
            ]
        }                      
      ]        
},
plugins: [
    extractPlugin,
    new WatchLiveReloadPlugin({
        port: 'localhost',
        files: [
            './dist/app/*.css',
            './dist/**/*.js',
            './src/app/**/*.png',
            './src/app/**/*.jpg',
            './src/app/**/.*.scss',
            './src/**/*.php',
            './src//*.js'
        ]
    })    
  ]
};

I also tried loader: 'file-loader?name=/dist/img/[name].[ext]', but with no luck.

My file structure is like this:

-- dist
   -- app
        bundle.js
        main.css
-- src
   -- app
     -- css
        main.scss
     -- img
        someimage.jpg

Then in my .scss i tried this:

background-image: url('/img/someimage.jpg');

Does anyone have an idea what's wrong here?

Answer 1

Try to import the image file in one of your script files like

import '/path/to/img.jpg';

this will let Webpack know about the dependency and copy it.

Answer 2

The CSS/Sass loaders do not translate URLs that start with a / , therefore your file-loader won't be applied here.

The solution is to use relative paths for the imports if you want them to be processed by webpack. Note that CSS and Sass have no special syntax for relative imports, so the following are equivalent:

url('img/someimage.jpg')
url('./img/someimage.jpg')

If you want them to be resolved just like a module, webpack offers the possibility to start the import path with a ~ , as shown in sass-loader - imports .