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

First you have to install bootstrap via npm:

meteor npm install --save bootstrap or same thing with bootstrap-sass if you want the sass version (my personal choice).

If you installed the standard version

You have to import the CSS file from the package in, for example, your imports/startup/client/index.js file, to ensure it will be loaded on client startup.

If you installed ´bootstrap-sass´

You can just make a ´main.scss´ file and point to boostrap.scss in the package( it should be in ´/node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss´).

So it would look like this.

client/main.scss

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

This has added benefits. You can keep piling up scss from anywhere in this file, and control css load order. For example, you can make a sass directory in imports, make an index.sass file and then add it in main.scss. In my opinion it's very neat.

How do you load the JS then?

import bootstrap from 'bootstrap' or import bootstrap from 'bootstrap-sass'

That's how you import npm packages.

EDIT: Apparently this wasn't working for everyone, but in Meteor 1.3.2.2 they seem to have fixed this. Now you can (really) import sass and less files from npm packages.

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

Importing it like this should do the trick now.

Answer 2

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