Laravel 混合:当 运行 npm 生产时错误的 css 属性

Laravel Mix: Wrong css properties when running npm production

环境

描述:

我正在尝试确定哪个 CSS 进程是某些 CSS 与 npm run production 一起应用的错误的罪魁祸首,但我无法做到这一点。一些 Bootstrap 4 CSS 属性正在 translated/simplified 并且它产生了错误的样式。我尝试了很多解决方案(在我的本地 webpack.mix.js => mix.options)。我试过禁用 purifyCss(我发现它没有使用它)、uglify、强制 outputStyle 到 'expanded'(在 .sass() 方法中)等。None 它们起作用了。

作为解决方法,我可以添加一个新的 "prod" ENV 并直接从我的 webpack.mix.js 执行缩小和其他操作,但我不喜欢这个解决方案,特别是当我认为它只是因为 setting/flag 某处我可以轻松更改(如果我知道是哪个)。

谢谢。

重现步骤:

npm run dev: background-position: center right calc(0.375em + 0.1875rem)

npm run production: background-position: 100% calc(.375em + .1875rem)

好吧,看起来这是一个 mixin 中的错误:

https://github.com/twbs/bootstrap/commit/de1a6e3201a2f047c5abd2430795be32d37e9a35#diff-4fcf7dc3cf66b28cb08274cc30798d70

https://github.com/cssnano/cssnano/issues/712

更新到最新的 Bootstrap 版本解决了这个问题。