Making Bootstrap & SASS play nice with EmberJS

I set up a template a few days ago for a side project, and thought I would share the tale of my adventure.

You'll essentially have two steps to get Bootstrap and Sass setup. Since we're dealing with Sass, first you'll want to enable ember to compile your stylesheets with the addon ember-cli-sass. You can install the package from the commandline in your ember project's directory with the following command.

npm install --save-dev ember-cli-sass

If you haven't done so already, you can now add your scss files to the styles directory. Afterwords you'll want to make sure that you change your app.css file to app.scss. This is where you'll be importing your scss stylesheets.

Here's an example of what your app.scss file could look like:

  //config variables
  @import "partials/config";

  //modules
  @import "modules/mixins";
  @import "modules/elements";

  //snippets
  @import "partials/snippets/custom_animations";

Now that you have your stylesheets imported into your app.scss you'll want to give your app access to the Bootstrap framework. I've provided two different flows that you can follow that will get you up and running with Bootstrap. First there is the ever so fast CDN option, and then there’s installing the bootstrap files locally.

CDN

You can grab the latest bootstrap CDN from bootstrapcdn. To include it in your ember application all you need to do is include the links in your /app/index.html as I've provided below.

<html class="no-js" lang="en">  
     <!-- BREAK -->
     <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>app_name</title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">

      {{content-for 'head'}}

      <link rel="stylesheet" href="assets/vendor.css">
      <link rel="stylesheet" href="assets/app_name.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

      {{content-for 'head-footer'}}
    </head>


    <body>
      <script src="assets/vendor.js"></script>
      <script src="assets/app_name.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


      {{content-for 'body'}}

      {{content-for 'body-footer'}}
    </body>
  </html>

warning: If you're copying the links above, make sure you're using the correct version of bootstrap

BTW don't worry about the css extension on the CDN link; ember-cli-sass will compile your scss files to css for you behind the scenes. As you can see I've included the link for the stylesheet inside the header. Notice that I've included the javascript link immediately after the javascript link for your assets/app_name.js. You'll need to include the javascript CDN link here so that your app will include the javascript correctly. If you don't do this you'll be in store for some funkiness when it's time for Bootstrap's javascript to kick in.
That's it, your app now has access to Bootstrap css and javascript in all its glory!

LOCAL INSTALL

We'll be using the bootstrap-sass Bower package to install Bootstrap. Type bower install bootstrap-sass --save in the commandline to install the package in your application. This will also include the package in your bower.json file.

Once it's finished installing, you'll still need to import the bower component into your ember-cli-build.js or Brocfile.js depending on the ember-cli version you're using. It'll look something like this:

  /* global require, module */

   var EmberApp = require('ember-cli/lib/broccoli/ember-app');

   // var app = new EmberApp();

   var app = new EmberApp({
         sassOptions: {
           includePaths: [
            'bower_components/bootstrap-sass/assets/stylesheets'
          ]
        }
    });

    app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap.js');

In this code we're using the sassOptions config property to include the path to where your newly installed bootstrap files are. Now Bootstrap will be available to your app. The last step is to import Bootstrap into your app.scss file.

@import "bootstrap";

In Addition

If you have any javascript or CSS files that do not have bower packages, you'll want to include those in your vendor dir. Once you've added files to the vendor dir, you'll need to import them into your ember-cli-build.js or Brocfile.js.

See the ember guides for more details about managing dependencies.

And that's it! Bootstrap and Sass are installed and compiling on your app. Good luck!

Menu