Question

从this answer开始，看起来链接到Bootstrap的dist文件很容易。

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

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

Answer 1

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

首先，安装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捆绑在一起的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通过安装.less
来编译您的broccoli-less-single文件
```
$ npm install --save-dev ember-cli-less
```
使用bower
安装bootstrap3
```
$ bower install bootstrap --save
```
移除app/styles/app.css并创建您自己的app/styles/app.less
```
@import "vendor/bootstrap/less/bootstrap.less";
```

奖金：您可以通过Brocfile.js文件导入bootstrap.js。只需添加

app.import('vendor/bootstrap/dist/js/bootstrap.js');

注意：在app/index.html中，请务必添加

<script src="assets/vendor.js"></script>

Answer 3

你可能已经找到了解决方案，但是使用ember-cli 0.0.33+，bower install -S bootstrap，它将你的文件保存到vendor文件夹并写入你的bower.json文件。

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

我还在app.less的底部包含了一个custom.less导入，我可以在那里编写自己的东西。

希望有所帮助。

Answer 4

在 ember-cli 中使用Less版本的Bootstrap：

安装Bootstrap Bower包
```
$ bower install --save bootstrap
```

将bootstrap.less导入app/styles/app.less

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

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

4 个答案: