css-loader URL root not modifying url

Question

I have my webpack.config like so:

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: { loader: 'css-loader', options: { url: false, root: 'http://localhost:9000/' } }
            }),
            exclude: /node_modules/
        }
    ]
},

Reading the css-loader options documentation it says:

If a root query parameter is set, however, it will be prepended to the URL and then translated.

If my css looks like so:

select-page {
    background-image: url('assets/background.png') !important;
}

I expect the output url to be 'http://localhost/9000/assets/background.png'.

However, that isn't what I'm getting, there is no change when I run the build.

Answer 1

So in order to get this to work, I need to make sure that I set { url: true } or just leave out that key because it defaults to true.

But then because I pull my assets in via the file-loader I set in the css the relative url for the assets after they're moved:

.select-page {
    background-image: url('/assets/background.png') !important;
}

This poses a new problem, with { url: true } this means css-loader is going to try and resolve it - but it can't because the files don't exist there.....

So I also have to use { alias: { } } like a so:

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: { 
            loader: 'css-loader', 
            options: { 
                root: 'http://localhost:8080/',
                alias: {
                    './assets': path.resolve(__dirname, './resources/images')
                }
            } 
        }
    }),
    exclude: /node_modules/
}

This means when css-loader tries to resolve the url it will swap out /assets with path.resolve(__dirname, './resources/images') which is actually where the resources are located. But it won't affect the original url.

There is a reason why the key in the alias is prepended with a ./ because it didn't work with just a / and I think that is because the css-loader will always preprend a / with a . before it continues processing the url.

Then the { root: '' } gets prepended to it so I get my desired output of:

.select-page {
    background-image:url("http://localhost:8080/assets/background.png")
}

This doesn't seem ideal to me - maybe it is just because my workflow is slightly different!