From this answer, it looks like linking to Bootstrap's dist
files is easy.
However, I'm using LESS in my project and want to take advantage of Bootstrap's LESS files. What's the recommended way to link this all up?
Also, since using LESS is technically using Bootstrap's source files, should I also link to Bootstrap's JS source too? Or is it fine to assume mixing sources bootstrap/less
and compiled dists bootstrap/dist/js/bootstrap.js
will just work?
As of Ember CLI version 0.1.1, this is the recommended way to use Bootstrap's less in your project.
First, install bootstrap:
$ bower install --save-dev bootstrap
Then install the less preprocessor
$ npm install --save-dev ember-cli-less
Then replace app.css with app.less in this folder:
/app/styles/
Inside your new app.less file, add this to the top of the file:
@import "../../bower_components/bootstrap/less/bootstrap.less";
In your Brocfile.js, add this:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
If you also want to use glyphicons that are bundled with boostrap, add this to Brocfile.js (ember-cli-build.js
if you're using the latest 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'
});
Here are the steps I did:
Ensure ember-cli compiles your .less
files by installing broccoli-less-single
$ npm install --save-dev ember-cli-less
Install bootstrap3 with bower
$ bower install bootstrap --save
Remove app/styles/app.css
and create your own app/styles/app.less
@import "vendor/bootstrap/less/bootstrap.less";
BONUS:
You can import bootstrap.js through the Brocfile.js
file. Just add
app.import('vendor/bootstrap/dist/js/bootstrap.js');
NOTE: In your app/index.html
, make sure you add
<script src="assets/vendor.js"></script>
For Ember 2.8 solution from ember-cli-less
addon readme worked for me:
Install Bootstrap source:
bower install --S bootstrap
Specify the include paths in ember-cli-build.js
:
var app = new EmberApp({
lessOptions: {
paths: [
'bower_components/bootstrap/less'
]
}
});
Import into app.less:
@import 'bootstrap';
Taken from: https://github.com/gdub22/ember-cli-less#examples
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With