Menu
It is my understanding that Meteor 1.3 favors npm packages over Meteor / atmosphere packages.
I tried to add Bootstrap to my project via meteor npm install bootstrap. Then I added a couple divs with classes row and col-md-3 to test it was working and I did not see what I was expecting (I did not see the grid layout). I created those divs inside the body tag, which is declared on a file called ./imports/ui/body.html. Maybe I'm missing an import {Bootstrap} from 'meteor/bootstrap', import {bootstrap} from 'bootstrap' (which I tried, with no success) or similar or an import '../../node_modules/bootstrap/somefile'.
I tried meteor add twbs:bootstrap and the app worked as expected (proper grid layout for those col-md-3).
This thread recommends using NPM. Maybe I missed something important in order to make it work via NPM with meteor 1.3?
My HTML code has nothing special (and worked when adding the meteor package twbs:bootstrap). The only quirk is that the HTML code is in a file in the imports/ directory, so probably I missed something important about the loading process.
Edits after seeing @loger9 and @benjaminos answers.
I did meteor npm install --save bootstrap and got a new node_modules directory. Just in case I run npm install and meteor again, to force any processes carried out on startup. body.html and body.js live in imports/ui. body.html is
<body>
<div class="container page-wrap">
<div class="page-header">
<h1>A title</h1>
</div>
<div class="row">
<div class="col-md-3" style="background: red;">
Lorem Ipsum
</div>
<div class="col-md-3" style="background: lavenderblush;">
Lorem Ipsum
</div>
</div>
</div>
</body>
and body.js includes
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './body.html';
But it complains it can not find the module ../../node_modules/bootstrap/dist/css/bootstrap.min.css (if I cd to the imports/ui dir and from there I cat ../../node_modules/bootstrap/dist/css/bootstrap.min.css I see the file, so it doesn't look like problem with that path being incorrect) and won't display anything.
Adding import bootstrap from 'bootstrap' seems to have no effect. client/main.js does also import '../imports/ui/body.js';
I actually know that this should be as easy as loger9 points out in their answer, but for some reason I can not get this to work.
357
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):
meteor add fourseven:scss
meteor npm install bootstrap-sass --save
client/main.scss (note the .scss extension):
@import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
client/main.js:
import 'bootstrap-sass';
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");
}
Per fourseven:scss, autoprefixer should preferably be installed as a separate plugin:
# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
