images in css with webpack 3 - css

Question

I have went over every stack overflow post regarding this issue, and still have been unable to solve this issue. I cannot get background-image: url() to work for the life of me. I am not kidding when I say I have gone through every post. Why is webpack so frustrating when it comes to this simple task? Below is my modules in my webpack.config. Please someone help I have been at this for two days.
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel-loader']},
{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /\.css$/, loader: 'style-loader!css-loader'},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!scss')
},
{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=images/svg+xml" },
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false',
'url-loader?limit=90000000&name=src/images/[name].[ext]'
]}
]
}

Answer 1

You need to use resolve-url-loader to be able to use relative paths in scss, here an example of how to use it:
module: {
rules: [{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]'
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true
}
}
]
})
}, {
test: /\.(jpe?g|png|gif|svg)$/,
loaders: [{
loader: 'file-loader',
options: {
name: '[path][name].[hash:base64:5].[ext]',
publicPath: '/',
outputPath: 'img/'
}
}, {
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 70
}
}
}]
}]
}
Pay attention to the options in file-loader that configuration tells webpack where to output the images.
In this commit there is a running example.