You may find the need to add third-party CSS to your application. This tutorial will walk you through how to add the popular normalize.css to your application. I'll use npm in the examples below but this approach works identically if you are using yarn to manage your dependencies. You'll just need to adjust the npm install commands.

the 3 easy steps

1. find the name of the package and add it to your project. In this example it is normalize.css . Sorry friends across the channel!

   npm install normalize.css
   

2. configure ember-cli so it will include the CSS in your application's build

   // in ember-cli-build.js
   app.import('node_modules/normalize.css/normalize.css', {prepend: true});
   

   You'll notice we passed a configuration option to app.import. The prepend: true configuration tells ember-cli to include this before all the other CSS in your project. This is especially important for normalize.css because it clears the default browser styles so it needs to come first to work properly. You can see the available options for the import method in the ember-cli API documentation.

3. Restart your ember server to see the changes! If all goes well you should see the contents of normalize.css in your project's vendor.css file.

   

   screenshot of browser tools on a macOS system, year 2019, planet earth

future improvements, trailing reflections

This approach is the classic way to include assets in your application. Couldn't we request these kinds of assets on demand, when a given part of your application uses them? For CSS the situation gets trickier and probably doesn't apply to our example. But @jacobq has raised the idea of loading CSS lazily using ember-auto-import. It is not supported yet but could happen.