Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript npm Basics (retiring) What is npm? Introducing npm

Fidel Torres
Fidel Torres
25,286 Points
Posted by Fidel Torres
Fidel Torres
25,286 Points

npm for bootstrap!!!!

I want to use npm to manage my bootstraps projects, using

npm install bootstrap

But this version has the less compiler for css I want to use the sass version

npm install bootstrap-sass

The files that I'm getting in this last option is totally different to the first one.

Question : How to start the project?

  • Where to place my html, scss, js files in order to use them.
  • How to link the Bootstrap files to my HTML files
  • Any other tip to do the deployment

2 Answers

Jefferson Lessa
Jefferson Lessa
5,684 Points
Jefferson Lessa
Jefferson Lessa
5,684 Points

There is no fixed way of doing this (you honestly could copy the files you want from the node_modules folder), but what I like to do in npm web projects is:

  • create a www folder, where my development is going to happen, and a scss folder, where my custom sass files are going to stay.
  • inside my main scss file, @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap". Do it before you use it, of course.
  • use a gulp task (or the sass compiler of your choice) to compile my sass files into a www/css folder.
  • copy everything else you need (js, etc) inside your www folder. You can use a task to do it if you are feeling fancy =P

When you @import bootstrap, the module will take care of everything else for you. If you want to change any variables, do it before the @import, so bootstrap will now not to override it with its defaults before using it. If you want to know the variables, just check _variables.scss inside the stylesheets folder.

I hope that helps you and anyone else passing by!

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Is this what the folder structure looks like? https://github.com/twbs/bootstrap-sass