How to add Twitter Bootstrap from NPM in a Meteor 1.3 app?

help
1

Edit: I wrote an article on how to use Bootstrap from NPM.

http://sergiotapia.me/2016/04/20/how-to-use-twitter-bootstrap-from-npm-in-your-meteor-application/

I ran the following command in my project folder: npm install bootstrap

1680×794 62.9 KB

Then when I run the project I get this error:

=> Errors prevented startup:                  
   
   While processing files with fourseven:scss (for target web.browser):
   /client/stylesheets/main.scss: Scss compiler error: File to import: /node_modules/bootstrap/dist/css/bootstrap.css not found in file:
   /Users/sergiotapia/Work/tiki/{}/client/stylesheets/main.scss
2

Tried this and I get the same type of error:

@import "/node_modules/bootstrap/less/bootstrap.less";

Error is:

=> Errors prevented startup:

While processing files with fourseven:scss (for target web.browser):
/client/stylesheets/main.scss: Scss compiler error: File to import: /node_modules/bootstrap/less/bootstrap.less not found in file:
/Users/sergiotapia/Work/tiki/{}/client/stylesheets/main.scss

3

Meteor can’t import non-javascript assets from node_modules right now. There are several workarounds including using symlinks and this is supposed to be fixed in 1.3.1 release. https://github.com/meteor/meteor/issues/6037

There are other forum posts on this issue you can search for as well.

4

Here is a working demo app: https://github.com/juliancwirko/meteor-bootstrap-postcss-test :wink:
Meteor 1.3 with Bootstrap 4 with Scss from Npm. This is an experiment, but as far as I know everything works with Bootstrap :wink: Btw. there is Meteor 1.3.1 released but I don’t know if there will be ever possibility to import .scss files like that. .scss was never in the Meteor’s core so it could be hard. On the other hand it needs just access to the node_modules and then fourseven:scss should be able to handle it. So maybe this is simpler than I tought. Anyway, there is Meteor 1.3.1 and it seems it is not solved in this release (correct me if I’m wrong).

5

Don’t know if this will even help, but I stumbled across this the other day when trying to import the *.less files: https://github.com/less/less-plugin-npm-import

6

Hi Julian,

I used your solution and it worked, except how do I now import my mixins and variables?

bootstrap-mixins.less and bootstrap-variables.less

Thanks!

7

Hi, there is Meteor 1.3.2 (it should be available by meteor update very soon) so this PostCSS based solution is not needed. I have another repo which uses standard Scss compiler from fourseven:scss package and Meteor 1.3.2: https://github.com/juliancwirko/meteor-bootstrap-npm-test

All what you need to do is to import all needed .scss files from {}/node_modules/bootstrap/scss/... folder or you can import all like {}/node_modules/bootstrap/scss/bootstrap.scss. (of course you need to npm install all) Here is an example: https://github.com/juliancwirko/meteor-bootstrap-npm-test/blob/master/client/main.scss

You can use that repo as a starting point. It works on Meteor 1.3.2-rc.5 (1.3.2 very soon).

3 Likes
8

So it’s now super easy to include Twitter Bootstrap directly from NPM. I wrote an article with step by step instructions for future reference.

http://sergiotapia.me/meteor/bootstrap/npm/2016/06/13/how-to-use-twitter-bootstrap-from-npm-in-your-meteor-application.html

2 Likes
9

Hi segiotapia.

I am not able to access your link (404) do you think you can help?
Thanks in advance

1 Like
10

Hey man, I recently migrated my blog from digitalocean to Github - and I’m too lazy to migrate all my posts there. :stuck_out_tongue:

Here’s the new link: http://sergiotapia.me/meteor/bootstrap/npm/2016/06/13/how-to-use-twitter-bootstrap-from-npm-in-your-meteor-application.html

11

Hi @sergiotapia. It seems that your link is broken. I really want to see your solution. Thanks you.

1 Like
12

With meteor 1.4, I import bootstrap into my project by:

in client/main.js

import ‘bootstrap’;
import ‘bootstrap/dist/css/bootstrap.css’;
import ‘bootstrap/dist/css/bootstrap-theme.css’;

4 Likes