I'm using the latest of everything.
I'm transpiling SASS to CSS and am referencing an image:
body{
background: url("../images/ugly-car.jpg");
}
The image gets changes according to my settings, but the path is incorrect after Webpack does its thing...
The resulting CSS is:
body{background:url(static/media/ugly-car.147a1cf5.jpg)}
But it needs to be:
body{background:url(../static/media/ugly-car.147a1cf5.jpg)}
I'm at the end of the rope here and tried everything I can think of...
Here's an example repo: https://github.com/joacim-boive/webpack-setup/tree/labb1
My webpack.config.js file from the repo:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = (env = {}) => {
return {
entry: ['./src/js/index.js', './src/css/sass/all.scss'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/bundle.[name].[hash:8].js',
// publicPath: '/'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
// If you are having trouble with urls not resolving add this setting.
// See https://github.com/webpack-contrib/css-loader#url
url: true,
minimize: true,
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
]
},
plugins: [
new ExtractTextPlugin('css/bundle.style.[hash:8].css', {
allChunks: true
}),
new HtmlWebpackPlugin({
inject: true,
template: 'src/index.ejs',
}),
]
}
};