如何使用我自己的LESS构建版本实现Bower的Bootstrap依赖性

时间:2014-05-08 14:36:36

标签: twitter-bootstrap less bower

我正在开发一个使用Grunt,Bootstrap和一些依赖于Bootstrap的东西的AngularJS项目(角形脚手架)(比如angular-strap)。我有一个我试图使用的Bootstrap自定义variables.less文件。

虽然我当然可以拥有自己的Bootstrap 3副本,并且可以使用我的variables.less文件编译我自己的bootstrap.css,但Grunt中的bowerInstall任务总是确保我的index.html文件更新也指向Bower Bootstrap包的CSS文件。

Bootstrap已经是一个非常重的有效载荷,所以我当然不想要其中的两个 - 这就是我所看到的。当我使用Grunt(最终使用我的Cordova构建过程)构建:dist时,我看到我的Bootstrap和Bower的副本都包括在内。这给我带来了麻烦。

所以我需要的是让Bower接受我已经覆盖Bootstrap 3并忽略其他Bower组件的依赖性的方法。否则我被迫将我的自定义LESS文件放在Bower Bootstrap文件夹中,这是一个禁忌。

有什么想法吗?

更新:

下面罗宾的回答完全解决了我的问题。我不知道的是我在Grunt中也遇到了cssmin的问题。即使我的index.html不再同时列出了我和Bower的Bootstrap CSS(由于Robin的解决方案),我仍然得到一个main.css,其中包括两个缩小的bootstrap.css副本。一个基于我的原始版本,另一个副本来自.rump文件夹,该文件夹由Grunt的autoprefixer和rev任务使用。我的index.html的配置方式,cssmin在.tmp和我的原始版本中引入了bootstrap.css的处理版本,这导致了一个双倍大小的“缩小”文件。 index.html中有问题的行看起来像这样:

<!-- build:css({.tmp,app}) styles/main.css -->

将其更改为固定加倍问题:

<!-- build:css(.tmp) styles/main.css -->

虽然它仍然让我打破了字形,但这本身就是另一个问题,我不再通过缩小bootstrap.css来处理它。

2 个答案:

答案 0 :(得分:2)

软件包grunt-bower-install为此提供了选项exclude。有点奇怪的是,它的文档是wiredep项目的一部分(grunt-bower-install使用)。

因此,您可以通过向bowerInstall任务添加以下选项来排除Boostrap CSS:

exclude: [ 'bower_components/bootstrap/dist/css/bootstrap.css' ]

也许您还需要排除bootstrap.min.css。甚至可以使用像这样的正则表达式:

exclude: [ /bootstrap/ ]

答案 1 :(得分:0)

我宁愿使用清洁的“自耕农”方式&#39;使用grunt-customize-bootstrap npm包。

它避免了丑陋的特定排除,并没有解决问题。