How to use with Webpack 2?

[fahad19]

I am currently trying to use postcss-url for transforming the url()s in my source CSS files. But it doesn't seem to have any impact.

This is how my Webpack configuration currently looks like:

{
  loader: 'postcss-loader',
  options: {
    plugins: [
      require('postcss-url')({
        url: 'rebase',

        // I put the options here
        from: 'src/deep/inside/styles.css',
        to: 'build/here/styles.css',
      }),
    ],

    // I duplicated the options here too, just in case it works
    from: 'src/deep/inside/styles.css',
    to: 'build/here/styles.css',
}

Would be very helpful if you can point me what I am doing wrong.

Thanks!

[michael-ciniawsky]

@fahad19 It's likely to have no impact since url() is handled by css-loader internally (needs to be coupled with webpack), we are working on a complete overhaul of the CSS pipeline atm trying to solve these issues via ICSS. See postcss-icss-url (doesn't work yet) && https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7 for reference

⚠️ This is likely won't fix for postcss-url

[fahad19]

thanks for the feedback, @michael-ciniawsky! if I can come up with something, I will post here.

[fahad19]

I went for a custom solution, but adding another loader in the chain that transforms the url() strings. still being processed though css-loader.

I will close the issue. thanks!