twitter-bootstrap - 将自定义 Bootstrap 构建合并到项目 grunt 任务中

Question

我有一个这样的项目结构......

app
├── 404.html
├── coffee
│   ├── app.coffee
│   └── controllers
├── colors.json
├── components
│   ├── angular
│   ├── angular-cookies
│   ├── angular-mocks
│   ├── angular-resource
│   ├── angular-sanitize
│   ├── angular-scenario
│   ├── bootstrap
│   ├── es5-shim
│   ├── jquery
│   └── json3
├── favicon.ico
├── index.jade
├── lib
│   ├── bootstrap
│   ├── font-awesome
│   ├── jquery
│   └── slider
├── robots.txt
├── styl
│   ├── main.styl
│   └── partials
└── views
    ├── demo.jade
    └── home.jade

我正在使用 Bower 安装 app/component 文件夹中的所有东西。我计划将自定义变量文件添加到 Bootstrap 并从较少的源构建它。我可以在 bower install 创建 app/bootstrap 文件夹后轻松修改 variables.less 文件，但我希望它从中读取我的自定义文件在 components 文件夹之外，而不必修改其中的任何内容。

如何使用由 Bower 加载的自定义 variables.less 文件将 Bootstrap 的构建合并到我现有的 grunt build 任务中？

Answer 1

我花了一段时间才弄清楚 less 的变量声明和导入是如何工作的，但最后，我通过 less 导入它并通过 grunt 编译 less 来自定义构建 bootstrap - 所以我的解决方案无关紧要确实是 grunt，但作为 grunt 构建的一部分启动。

我项目的 main.less 文件的内容...

// import the default bootstrap variables...
@import "../components/bootstrap/less/variables.less";

// custom variable overrides have to be loaded BEFORE bootstrap.less
// this is useful for changing any variables that influence the way bootstrap is built
@import "_bootstrap-variables-overrides.less";

// load the main bootstrap file
@import "../components/bootstrap/less/bootstrap.less";

// components overrides have to be loaded AFTER bootstrap.less
// this is useful for overriding bootstrap styles that are not configurable as variables
@import "_bootstrap-components-overrides.less";

// more less...
/* ... */