8

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

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

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

4

5 回答 5

10

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

首先，安装引导程序：

$ 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'
});
于 2014-10-15T06:45:39.520 回答
4

以下是我执行的步骤：

  1. 确保 ember-cli.less通过安装来编译您的文件broccoli-less-single

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

  2. 安装 bootstrap3bower

    $ bower install bootstrap --save

  3. 删除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>
于 2014-07-04T14:09:04.293 回答
2

ember-cli-less对于来自插件自述文件的Ember 2.8 解决方案对我有用：

安装引导源：

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

于 2016-12-02T15:37:43.090 回答
0

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

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

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

希望有帮助。

于 2014-06-17T14:23:20.757 回答
0

要将较少版本的 Bootstrap 与ember-cli一起使用：

  1. 安装 Bootstrap Bower 包

    $ bower install --save bootstrap

  2. 导入bootstrap.less_app/styles/app.less

    @import "vendor/bootstrap/less/bootstrap.less";
于 2014-07-03T14:43:02.033 回答