csstwitter-bootstrap-3lesscustomizing

Bootstrap 3 and Less together

I wanted to use Bootstrap 3 and Less together. Here is what I did:

  1. installed Node.js
  2. installed Less using npm
  3. downloaded bootstrap source (in a different directory than my project's directory)
  4. copied the entire '/less' subfolder to my project's working directory.

  5. created my custom .less file (e.g. styles.less) and included the following: @import '../less/bootstrap.less'; @import '../less/utilities.less';

  6. compiled in the Node command prompt using: ' lessc styles.less > styles.css '

My question:

Do I now need to only include the compiled styles.css file with my project or do I have to include all the bootstrap components as well?

Also, is this workflow recommended? (I actually read something similar in a smashingmagazine.com article).

PS: Apologies in advance for this silly (I think) question.

Thanks!

Solution

  • If you used 

    @import "bootstrap.less";

    ..inside your main less file, then the bootstrap.less will be included during compiletime and will be inside your compiled styles.css.

    After your styles.css has been compiled, you only need to include this file into your project.

    PS. Also take a look inside your styles.css file, to see what has been compiled inside there. Or play around yourself/experiment. For example, create 2 different less files, @import them inside your main.less, compile and see what happens.