Ember CLI is set up to offer developers speed in many ways, including adding code from the open-source community. In previous chapters, you added node modules to your local environment via npm. Earlier in this chapter we discussed loading external libraries via Bower, another package manager.

Ember CLI works well with both of these package managers. Installing libraries or tools is done with simple commands like:

npm install [package name] --save-dev
npm install [package name] --save
bower install [package name] --save

When using external libraries, these command-line tools load files to the directories bower_components and node_modules.

You used Bootstrap for CoffeeRun, and you are going to start Tracker with it as well. To add Bootstrap with Bower, enter the following command in the terminal:

bower install bootstrap-sass --save

You have now loaded the Bootstrap library locally, with all its JavaScript and style files. You will roll this library into the Ember CLI build process so that you can ship your application with the Bootstrap assets your application needs.

The modern web workflow for developing scripts and styles includes compilation. You are going to add a tool to help reduce the complexity of compilation: ember-cli-sass will handle converting SCSS stylesheets to CSS during the Ember CLI build process. SCSS, commonly referred to as “Sass,” adds many familiar programmatic constructs to your stylesheets like variables, functions, loops, and key/value pairs – without losing the CSS syntax you know and love.

Install ember-cli-sass from the terminal:

ember install ember-cli-sass

ember-cli-sass is an example of an Ember addon. Addons (www.emberaddons.com) are projects that have added external libraries or configuration code, created helpers or components, or done some other type of heavy lifting for you. Ember CLI makes it easy to add these existing projects to your project with the ember install command.

Note that Ember CLI is a relatively new tool, and addons can be out of sync. If you run into problems with a particular addon, visit the issues page at the addon’s GitHub repository.

You have just added the ability to compile SCSS files. Now you need to change the app/styles/app.css to be a .scss file. Rename app/styles/app.css to app/styles/app.scss. Restart the Ember server when you are done so the new CLI tools initialize.

To test the new CLI tool, you are going to add a SCSS variable to your stylesheet. With a $ as a prefix, create a name/value pair to test the SCSS compilation in app/styles/app.scss:

$bg-color: coral;
html {
  background: $bg-color;
}

Check your browser. Your page now displays a background color (Figure 19.5).

Figure 19.5  Compiling SCSS: test

Next, you will add Bootstrap styles and scripts to your project. Earlier you added the SCSS version of Bootstrap via bower install bootstrap-sass. To add the library to your stylesheet, you will need to import the style library into your file and configure Ember CLI to build your application with those assets.