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.

Callum Linington · Accepted Answer · 2017-09-01 09:00:23Z

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!

Vignesh · Accepted Answer · 2017-08-30 12:19:02Z

-1

Try to change the webpack configuration file. And check that assets folder should present under src folder

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

module: {
    rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
           {
             test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
             use: [
                 {
                    loader: 'file-loader?name=assets/[name].[ext]',
                 }
             ]
           }
        ]
},

edited Aug 30, 2017 at 12:19

answered Aug 30, 2017 at 12:13

Vignesh

2,3844 gold badges28 silver badges48 bronze badges

Collectives™ on Stack Overflow

css-loader URL root not modifying url

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related