CODEWITHSUNDEEP
csswebpack
Loilo
Loilo

Reputation: 14685

Webpack – rewrite CSS URLs

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?

Upvotes: 2

Views: 3912

Answers (2)

Loilo
Loilo

Reputation: 14685

That was actually really easy.

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

Upvotes: 3

pilau
pilau

Reputation: 6723

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

Upvotes: 0

Related Questions