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并从较少的源代码构建它。我可以在variables.less创建bower install文件夹后轻松修改app/bootstrap文件，但我希望它从components文件夹外部读取我的自定义文件，而不是必须修改其中的任何内容。

如何使用由bower加载到我现有variables.less任务中的自定义grunt build文件来构建引导程序的构建？

Answer 1

我花了一些时间来研究变量声明和导入工作的减少程度，但最后，我有一个自定义构建的bootstrap，通过less导入它，并通过grunt编译得更少 - 所以我的解决方案与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...
/* ... */

Answer 2

正确的＃yeoman＆＃39;这样做的方法似乎是grunt-customize-bootstrap npm包。

只需安装它并在你的grunt编译过程中添加一个grunt任务，如包页面上所述，它应该没问题！

将自定义引导程序构建合并到项目grunt任务中

2 个答案: