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).
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.
3.145.55.198