如何在前端項目中引用bootstrap less？

　　在基於bootstrap css框架的前端項目開發中，若是有grunt build系統，那麼工做流是：客製化less，在less中定義本身的

CSS，同時能夠隨意引用bootstrap中預約義好的css類，一旦保存文件，grunt則開始從新構建，生成最後的生產文件。問題是：

如何可以在本身的客制less文件中引入bootstrap的less變量或者mixin呢？

好比：我如何可以實如今屏幕尺寸在@screen-md時，將全部的圖片隱藏呢？

對於這個場景，假設項目目錄結構以下：

> bower_components
  > bootstrap
  > font-awesome
  > requirejs
  ...
> css
  - project.css
  > less
    - project.less
    - variables.less

 

可行的辦法爲：

1.在project.less中import bootstrap.less，font-awsome,以及本身定義的項目所需less文件：

// Bootstrap framework
@import "../../bower_components/bootstrap/less/bootstrap.less";

// Font-awesome awesomeness
@import "../../bower_components/font-awesome/less/font-awesome.less";

// Project specific stuff
@import "variables.less";
@import "stuff.less";

2.在variables.less文件中一方面定義本身的所需變量，另外一方面能夠覆蓋掉bootstrap的預置變量；

// Override Bootstrap variables
@font-family-sans-serif:  "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
@btn-default-border: #bbb;
@brand-primary: #b02b2c;
@link-color: #08c;

// Override Font-Awesome variables (path relative to project.css position)
@fa-font-path: "../bower_components/font-awesome/fonts";

//Map Bootstrap variables to myproject specific names
@my-customname-float-breakpoint: @grid-float-breakpoint;
@theme-color: @brand-primary;

//Project specific variables
@my-favourite-color: rgb(228, 1, 1);

3.僅僅編譯project.less文件，最後生成一個一應俱全的巨大css文件（注意這裏也包含font-awsome）

4.既然在project.less中已經引入了bootstrap.less，那麼在後面import的自創less文件天然能夠引用任何bootstrap less變量或mixin,好比：

// Hide all images at a viewport smaller than 992px (aka @screen-md)
@media (max-width: @screen-sm-max) {
    img {
        display: none;
    }
}

原文出處：

http://stackoverflow.com/questions/20246514/using-twitter-bootstrap-3-during-development

http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/

http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

http://slicejack.com/bootstrap-with-less-workflow/

https://www.npmjs.com/package/grunt-include-bootstrap

http://stackoverflow.com/questions/12655034/how-to-use-bootstrap-and-less-and-keep-a-clean-project