8

この回答から、Bootstrap のdistファイルへのリンクは簡単なようです。

しかし、私は自分のプロジェクトで LESS を使用しており、Bootstrap の LESS ファイルを利用したいと考えています。これをすべてリンクするための推奨される方法は何ですか?

また、LESS を使用することは技術的には Bootstrap のソース ファイルを使用しているため、Bootstrap の JS ソースにもリンクする必要がありますか? それとも、ソースbootstrap/lessとコンパイル済みのディストリビューションを混在させるbootstrap/dist/js/bootstrap.jsだけでうまくいくと仮定しても問題ありませんか?

4

5 に答える 5

10

Ember CLI バージョン 0.1.1 の時点で、これはプロジェクトで Bootstrap の less を使用するための推奨される方法です。

まず、ブートストラップをインストールします。

$ 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 にバンドルされているグリフィコンも使用する場合は、これを 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. .lessインストールして、ember-cli がファイルをコンパイルすることを確認します。broccoli-less-single

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

  2. でbootstrap3をインストールbower

    $ bower install bootstrap --save

  3. 削除app/styles/app.cssして独自に作成するapp/styles/app.less

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

ボーナス: ファイルから bootstrap.js をインポートできBrocfile.jsます。追加するだけ

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

注: にapp/index.html、必ず追加してください

<script src="assets/vendor.js"></script>
于 2014-07-04T14:09:04.293 に答える
0

これに対する解決策はすでに見つかっているかもしれませんが、ember-cli 0.0.33+ では、ファイルをベンダー フォルダーに保存し、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 に答える