Laravel Mix: Wrong css properties when running npm production

Question

Environment

Laravel Mix Version: [email protected]
Node Version: v8.2.1
NPM Version: 6.10.0
OS: Linux (Ubuntu 18.04)

Description:

I'm trying to identify which CSS process is the culprit of some wrong CSS being applied with npm run production but I'm not being able to do it. Some Bootstrap 4 CSS properties are being translated/simplified and it's producing wrong styles. I tried a lot of solutions (in my local webpack.mix.js => mix.options). I've tried to disable purifyCss (I discovered it's not using it), uglify, force outputStyle to 'expanded' (in .sass() method), etc. None of them worked.

As a workaround, I could add a new "prod" ENV and perform minification and other things directly from my webpack.mix.js, but I don't like this solution, specially when I think it's just because of a setting/flag somewhere I could easily change (if I knew which one).

Thank you.

Steps To Reproduce:

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

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

I don't get your ruleset. As far as i know we don't have 3-Value syntax in background position. — mhrabiee
– mhrabiee, Commented Jul 15, 2019 at 9:31
@mhrabiee that rule was inside Bootstrap 4.3.1 I can see it was fixed recently: github.com/twbs/bootstrap/commit/… I'll update my local version and close this post. Thank you. — Luciano Fantuzzi
– Luciano Fantuzzi, Commented Jul 15, 2019 at 17:29

Luciano Fantuzzi · Accepted Answer · 2019-07-15 17:42:26Z

1

Well, it looks like it was a bug in a mixin:

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

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

Updating to latest Bootstrap version solves the issue.

answered Jul 15, 2019 at 17:42

Luciano Fantuzzi

1,03613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Mix: Wrong css properties when running npm production

Environment

Description:

Steps To Reproduce:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Environment

Description:

Steps To Reproduce:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related