[英]How can I figure out why Rails Webpacker is changing my css?
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.我在 rails 6.0 项目中使用 rails-webpacker gem,并且在我无法真正控制的文件中包含 bootstrap 和其他一些 css。 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.在开发中一切看起来都很好,但是当我部署时(调用 webpacker:compile 或 assets:precompile,它们都做同样的事情)它会生成我的包,并且在过程中的某个地方破坏了一些 css 声明。 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 bootstrap 中的确切行是: 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.我假设这是由@rails/webpacker 包含的某个 css 处理器完成的,但我无法弄清楚如何调试和隔离哪个导致更改。
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/我相信这是 webpacker 正在使用的插件: https ://webpack.js.org/plugins/mini-css-extract-plugin/
A permanent fix would need to edit the webpack config for this plugin.永久修复需要编辑此插件的 webpack 配置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.