在Ember.JS ember-cli应用中使用Bootstrap的LESS源代码的推荐方法是什么？

Question

从这个答案来看，链接Bootstrap的dist文件很容易。

然而，我在项目中使用LESS，并希望利用Bootstrap的LESS文件。有没有推荐的方法来链接这些文件？

此外，由于使用LESS技术实际上是使用Bootstrap的源文件，所以是否应该将Bootstrap的JS源文件也链接起来？或者认为混合源代码bootstrap/less和已编译的分发文件bootstrap/dist/js/bootstrap.js会正常工作？

- Joe

Answer 1

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

首先，安装Bootstrap：

$ bower install --save-dev bootstrap

然后安装less预处理器

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

然后在该文件夹中用 app.less 替换 app.css：

/app/styles/

在你的新app.less文件中，将以下内容添加到文件顶部：

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

在你的Brocfile.js文件中，添加如下内容：

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

如果您想使用与Bootstrap捆绑在一起的字形图标，请将以下内容添加到Brocfile.js中（如果您使用最新的ember-cli，则为ember-cli-build.js）：

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'
});

- Johnny Oshika

Answer 2

以下是我所执行的步骤：

1. Ensure ember-cli compiles your .less files by installing broccoli-less-single

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

2. Install bootstrap3 with bower

   $ bower install bootstrap --save
   

3. Remove app/styles/app.css and create your own 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>

- Melvin

Answer 3

对于与Ember 2.8相关的解决方案，我从ember-cli-less插件的自述文件中获得了帮助：

安装Bootstrap源码：

bower install --S bootstrap

在 ember-cli-build.js 文件中指定包含路径：

var app = new EmberApp({
  lessOptions: {
    paths: [
      'bower_components/bootstrap/less'
    ]
   }
});

将其导入到app.less文件中：

@import 'bootstrap';

摘自：https://github.com/gdub22/ember-cli-less#examples

这是一个关于it技术的例子。

- Jan Míšek

Answer 4

使用ember-cli与Less版本的Bootstrap：

1. 安装Bootstrap Bower包

   $ bower install --save bootstrap
   

2. 将bootstrap.less导入到app/styles/app.less中

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

- Giovanni Cappellotto

Answer 5

你可能已经找到了解决方案，但使用 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/ 中包含了一个 app.less 文件。你可以从那里引用 vendor/bootstrap/less/。

我还在 app.less 的底部包含了一个 custom.less 导入，可以在其中编写自己的内容。

希望能有所帮助。

- SuperNinja