How use bootstrap via NPM in Meteor 1.3?

Question

It is my understanding that Meteor 1.3 favors npm packages over Meteor / atmosphere packages.

I tried to add Bootstrap to my project via me

Answer 1

I found the solution in this Sergio Tapia's blog post. It works on Meteor 1.3.2.2 or greater. These are the steps that worked for me (with SASS/SCSS support):

Installing

meteor add fourseven:scss
meteor npm install bootstrap-sass --save

Import to your code

• client/main.scss (note the .scss extension):

  @import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
  

• client/main.js:

  import 'bootstrap-sass';
  

Workaround for Glyphicons

The only solution I found for the Glyphicons font was to copy the fonts folder to public/:

cp -avr node_modules/bootstrap-sass/assets/fonts public/

Note how it is loaded in Meteor (/fonts/bootstrap, i.e., it needs to be in the public folder):

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot?") format("embedded-opentype"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/bootstrap/glyphicons-halflings-regular.svg") format("svg");
}

---

Optional step: Autoprefixer

Per fourseven:scss, autoprefixer should preferably be installed as a separate plugin:

# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer