建议在Ember.JS ember-cli应用程序中使用Bootstrap的LESS源代码

Question

从这个答案来看,它似乎dist很容易链接到Bootstrap的文件.

但是,我在我的项目中使用LESS并希望利用Bootstrap的LESS文件.建议的方法是什么？

另外,由于在技术上使用LESS是使用Bootstrap的源文件,我是否也应该链接到Bootstrap的JS源代码？或者可以假设混合源bootstrap/less和编译的dists bootstrap/dist/js/bootstrap.js可以正常工作？

Answer 1

从Ember CLI版本0.1.1开始,这是在项目中使用Bootstrap的推荐方法.

首先,安装bootstrap:

$ bower install --save-dev bootstrap

然后安装较少的预处理器

$ 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捆绑在一起的glyphicons,请将其添加到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'
});

Answer 2

您可能已经找到了解决方案，但在 ember-cli 0.0.33+ 中，bower install -S bootstrap 会将您的文件保存到供应商文件夹并写入您的 Bower.json 文件。

app.import('vendor/bootstrap/dist/js/bootstrap.min.js');在 Brocfile.js 中跟进。我从那里在vendor/bootstrap/less/`中包含了一个app.less文件app/styles/. You can reference your。

我还在 app.less 的底部添加了 custom.less 导入，我可以在其中编写自己的东西。

希望有帮助。