5

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.

Tracy Fu
  • 1,632
  • 12
  • 22

1 Answers1

8

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;
}
Shiva
  • 11,485
  • 2
  • 67
  • 84
  • I don't think I need to add it to my Gemfile because it's already a dependency of `bootstrap-sass` which is in my Gemfile. I can see it when I `bundle list`. I've tried clearing my cache, but I'm still not seeing prefixes added to the compiled CSS. – Tracy Fu Aug 29 '15 at 08:30
  • try restarting your `rails-server` and if not fixed, try including it in `gemfile` and restarting the `app` again.. try hard-reloading the browser – Shiva Aug 29 '15 at 08:34
  • I have edited the Answer @TracyFu, if any problem lets communicate – Shiva Aug 29 '15 at 08:53
  • 2
    Meh. I think you're right. It only works if I explicitly add it to the Gemfile. Thanks for your help. – Tracy Fu Aug 29 '15 at 09:00