Webpack – rewrite CSS URLs

Question

I'm using Webpack to process my CSS files. I want to rewrite url()s in CSS files to keep referencing the original assets, just changing the URL.

For example this file:

/* src/main.css */
body {
    background-image: url('image.png');
}

should compile to this

/* bundle/main.css */
body {
    background-image: url('../src/image.png');
}

I found the rewrite-url-loader but this just does not work at all for me, it does nothing.

I've got the feeling that file-loader may be able to do just what I want to do but I can't figure out how.

Anyone got an idea?

score 3 · Answer 1 · edited Jan 04 '23 at 13:58

3

That was actually really easy.

I had to set Webpack's context option to point to my project root.
Then I could easily just use file-loader like this: file?emitFile=false&name=[path][name].[ext]&publicPath=../.

edited Jan 04 '23 at 13:58

General Grievance

answered Oct 06 '16 at 07:42

Loilo

score 0 · Answer 2 · answered Oct 25 '17 at 12:51

For Webpack 2 and Webpack 3:

use: [{
  loader: 'file-loader',
  options: {
    context: path.resolve(__dirname, 'src')
    name: '[path][name].[ext]'
  },
},

For a full answer with example and explanation: https://stackoverflow.com/a/46931670/1049693

2 Answers2