Skip to content

Configuring wicked_pdf for Bootstrap

aranhaqg edited this page Jun 16, 2016 · 1 revision

This configuration works for non twitter-bootstrap-rails gem setup.

1 - Edit app/assets/stylesheets/application.css by adding:

*= require bootstrap

2 - Edit app/assets/javascripts/application.js by adding:

//= require bootstrap

3 - In config/application.rb, add the following after class Application < Rails::Application. It should look like this:

class Application < Rails::Application
     config.assets.paths << "#{Rails.root}/app/assets/stylesheets/font-awesome-4.2.0/css/"
     config.assets.paths << "#{Rails.root}/app/assets/stylesheets/bootstrap/" #All bootstraps css files location
     config.assets.paths << "#{Rails.root}/vendor/assets/fonts"

4 - In the terminal, compile your assets by running:

rake assets:precompile RAILS_ENV=development

5 - Edit the bootstrap.css file by changing @font-face resource locations from ../fonts/ to /assets/. It should look like this:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/assets/glyphicons-halflings-regular.eot');
    src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

6 - And, finally add a import for bootstrap in your pdf.css.scss file. It should look like this:

@import "bootstrap";
@import "font-awesome";
@import "estilo";