I'm trying to set up a basic webpack project. Everything is smooth, except the generated image paths within the generated CSS.
Folder structure:
src/
assets/
images/
js/
scss/
dist/
assets/ <--- generated correctly, incl. images
images/
bundle.js
main.bundle.css <--- includes "wrong" paths, starting with dist/
index.htm
webpack.config.js
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
watch: true,
entry: ['./src/js/main.js', './src/scss/main.scss'],
output: {
filename: 'dist/bundle.js'
},
module: {
rules: [
{ // regular css files
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
}),
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
},
{ // images
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: path.resolve(__dirname, "src/"),
outputPath: 'dist/'
}
}
]
},
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/[name].bundle.css',
allChunks: true
})
]
};
src/scss/main.scss
@import "./../../node_modules/bootstrap/scss/bootstrap";
body {
background-image: url('../assets/images/bg.jpg');
}
dist/main.bundle.css
body {
background-image:url(dist/assets/images/bg.jpg)
}
index.htm
<link rel="stylesheet" href="dist/main.bundle.css">
Problem:
dist/main.bundles.css
is already located in dist/
, but prefixes the image paths with dist/
. There must be a configuration problem on my side.
Any idea? Thanks in advance!