1

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',
            }),
        ]
    }
};
Rob
  • 14,746
  • 28
  • 47
  • 65
jBoive
  • 1,219
  • 1
  • 14
  • 40

0 Answers0