How do I use bootstrap-sass's autoprefixer?

Question

I have a Rails app where I’m using the bootstrap-sass gem which lists autoprefixer-rails as a dependency.

I don’t quite understand how to get Autoprefixer to prefix my app’s CSS. Do I need some asset config? Will it prefix compiled Sass in dev while in asset debug mode?

According to autoprefixer-rails’s docs, I just have to clear my cache and write CSS... None of my compiled Sass has any prefixes, but Bootstrap’s CSS does.

Any help/explanations would be appreciated.

Answer 1

It is found to be simple Add the autoprefixer-rails gem to your Gemfile:

# In gemfile
gem 'bootstrap-sass'
gem 'autoprefixer-rails'

# Install the gem
$ bundle install

Clear your cache:

# Its very important
$ rake tmp:clear

Although the gem autoprefixer-rails is a dependency to bootstrap-rails it looks like it uses the autoprefixer-rails internally and the sprockets has no idea about it.

Add your css styles without browser prefixes in .css, .scss, or .sass file. Then you find that your style have prefix added. If you have

.fullscreen a {
    display: flex;
}

you will get

.fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}