How can I figure out why Rails Webpacker is changing my css?

Question

I'm using the rails-webpacker gem in a rails 6.0 project and am including bootstrap along with some other css in a file I don't really have control over. It's basically just a minified bootstrap along with some additional styles.

Everything looks fine in development, but when I deploy (which calls webpacker:compile or assets:precompile, they both do the same thing) it generates my packs and somewhere in the process breaks some css declarations. One in particular:

background-position: center right calc(.375em + .25rem);

is being changed to:

background-position: 100% calc(.375em + .25rem);

The exact line in bootstrap is: https://github.com/twbs/bootstrap/blob/v4.3.1/dist/css/bootstrap.css#L2208

I'm assuming that this is being done by some css processor that is being included by @rails/webpacker, but I can't figure out how to debug and isolate which one is causing the change.

Answer 1

Try setting:

config.optimization.minimize = false

In your config to see if that makes it go away?

I believe this is the plugin webpacker is using: https://webpack.js.org/plugins/mini-css-extract-plugin/

A permanent fix would need to edit the webpack config for this plugin.