Level 24
Anyone else not come across this?
Mar 8, 2019
11
Level 24
Bootstrap 4 scss with autoprefixer missing -ms-flex-wrap
I have a new project using bootstrap 4 scss. I have autoprefixer running in my webpack.mix.js:
mix.react("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
postCss: [
require("autoprefixer")({
browsers: [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})
]
});
It is prefixing -ms-flexbox but I still have a broken layout. When I compare it to the cdn version of bootstrap .css I notice that -ms-flex-wrap is missing from my compiled version but it is in their cdn version. Any ideas how to get mine to compile the same?
Level 24
It seems like it is actually removing it…not just failing to add it. Instead of importing bootstrap.scss into my app.scss file, I imported the dist/css/bootstrap.min.css instead. I checked the file and it has -ms-flex-wrap in there. After my scss compiles my app.css file has everything except -ms-flex-wrap
Any ideas?
Level 3
That is ok.
The Autoprefixer ( https://github.com/postcss/autoprefixer ) checks with Can I Use ( https://caniuse.com/ ) if the prefixing is still necessary.
In your case flex-wrap is supported enough to not prefix it any more.
Level 24
@JSENGER - any way to stop it ignoring it? It is needed for IE10. I do specify IE10 in the browser list but it makes no difference
Level 18
from https://github.com/postcss/autoprefixer
Available options are: ...
- flexbox (boolean|string): should Autoprefixer add prefixes for flexbox properties. With "no-2009" value Autoprefixer will add prefixes only for final and IE 10 versions of specification. Default is true. ...
Maybe it can help
Level 3
I haven't tried that yet, but it seems as if you can just use the prefixed selector after the unprefixed one:
.wrap-it {
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
At least the documentation says it should work that way: https://github.com/postcss/autoprefixer#disabling
Level 24
@JSENGER - no, that's the problem. It actually removes it from my css. i.e. it is already there in my bootstrap.min.css file, but after compiling all to app.css it is missing. It also states on caniuse that it still needs the prefix for IE10
Level 3
Just tried it myself and added the prefixed one to a rule and it worked.
Did you assign -ms-flex-wrap directly after flex-wrap?
Level 24
@JSENGER - well since it concerns the bootstrap.min.css I have to rely on how they have done it. Looks like they have -ms-flex-wrap, then flex-wrap. So that explains why it strips it out for that file.
But, why is it ignoring my browsers? It should leave it alone if i specify IE10. I've tried setting it to "last 10 versions" but still the same result. Bootstrap actually say they use autoprefixer to generate their .css version so it should work
Level 24
Ok I solved this by removing the browsers from my webpack.mix.js and downloaded browserslist then added the list to my package.json file. No idea why webpack.mix.js was ignoring the options though
Level 3
Strange... but I'm glad that it's working for you now.
Please or to participate in this conversation.