Custom Bootstrap from SASS in vendor.css (not in app.css)

Ember CLI
1

Hi All

I’ve been trying to figure this out, and I need some help.

I want to use a custom version of bootstrap and I want to use SASS. The thing is, I want to compile bootstrap to vendor.css (and not to my app.css file). This is because I have a bunch of plugins that I depend on bootstrap’s CSS, so if I add the @import statement to my app/styles.scss bootstrap’s styles will go to the app-name.css file, and all the styles of the plugins won’t work (because they are on the vendor.css which is before the app.css). I also have a bootstrap theme that provides a SASS version that I would like to place right after bootstrap.

So I have an ember-cli-build.js file somewhat like this:

//SASS files
app.import('path/to/bootstrap/_bootstrap.scss'); <---- I would like this to work somehow
app.import('path/to/template/styles.scss'); <---- I would like this to work somehow
//Plugins
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');

I don’t want to include all the plugins in my app.css file because most of the plugins (and even bootstrap and the theme) don’t change much, there’s no point in making them part of the app.css.

I’ve tried fiddling with ember-cli-build and adding broccoli plugins but without much luck.

Thanks!

2

You can write an in-repo-addon as suggested in this issue cooment to include bootsrap in your vendor.css

3

@hyder, thanks very much for helping me out. I’ll have to try the solution but it seems promising. Once again, thanks a lot for your input. :smile: