twitter-bootstrap - 在 Ember.JS ember-cli app 中使用 Bootstrap 的 LESS 源的推荐方式

Question

来自 this answer ，它看起来像链接到 Bootstrap 的 dist文件很容易。

但是，我在我的项目中使用 LESS，并希望利用 Bootstrap 的 LESS 文件。将这一切联系起来的推荐方法是什么？

另外，由于使用 LESS 在技术上是使用 Bootstrap 的源文件，我是否也应该链接到 Bootstrap 的 JS 源？或者可以假设混合源bootstrap/less并编译 dists bootstrap/dist/js/bootstrap.js会起作用吗？

Answer 1

从 Ember CLI 版本 0.1.1 开始，这是在项目中使用 Bootstrap 的 less 的推荐方式。

首先，安装 Bootstrap :

$ bower install --save-dev bootstrap

然后安装less预处理器

$ npm install --save-dev ember-cli-less

然后在此文件夹中将 app.css 替换为 app.less:

/app/styles/

在新的 app.less 文件中，将其添加到文件顶部:

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

在您的 Brocfile.js 中，添加以下内容:

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');

如果您还想使用与 boostrap 捆绑的字形图标，请将其添加到 Brocfile.js(如果您使用的是最新的 ember-cli-build.js，则为 ember-cli):

app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
});