Stylesheet compilation

Ember CLI supports plain CSS out of the box. You can add your CSS styles to app/styles/app.css and it will be served at assets/application-name.css.

To use a CSS preprocessor, you'll need to install the appropriate Broccoli plugin. When using a preprocessor, Broccoli is configured to look for an app.less, app.scss, app.sass, or app.styl manifest file in app/styles. This manifest should import any additional stylesheets.

All your preprocessed stylesheets will be compiled into one file and served at assets/application-name.css.

If you would like to change this behavior, or compile to multiple output stylesheets, you can adjust the Output Paths Configuration

CSS

To use plain CSS with app.css:

  • Write your styles in app.css and/or organize your CSS into multiple stylesheet files and import these files with @import from within app.css.
  • CSS @import statements (e.g. @import 'typography.css';) must be valid CSS, meaning @import statements must precede all other rules and so be placed at the top of app.css.

To process your imports and replace them with the contents of their files, add in ember-cli-build.js:

ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    minifyCSS: {
      options: { processImport: true }
    }
  });

  //...
  return app.toTree();
};

Which will cause the following to happen:

  • In the production build, the @import statements are replaced with the contents of their files and the final minified, concatenated single CSS file is built to dist/assets/yourappname-FINGERPRINT_GOES_HERE.css.
  • Any individual CSS files are also built and minified into dist/assets/ in case you need them as standalone stylesheets.
  • Relative pathing gets changed (how to customize?)

Example app.css with valid @import usage:

/* @imports must appear at top of stylesheet to be valid CSS */
@import 'typography.css';
@import 'forms.css';

/* Any CSS rules must go *after* any @imports */
.first-css-rule {
  color: red;
}
...

CSS Preprocessors

To use one of the following preprocessors, all you need to do is install the appropriate npm module. The respective files will be picked up and processed automatically.

LESS

To enable LESS, you'll need to add ember-cli-less to your npm modules.

ember install ember-cli-less

SCSS/SASS

To enable SCSS/SASS, you'll need to install the ember-cli-sass addon to your project (defaults to .scss, .sass allowed via configuration).

ember install ember-cli-sass

You can configure your project to use .sass in your ember-cli-build.js:

ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp({
    sassOptions: {
      extension: 'sass'
    }
  });

  //...
  return app.toTree();
};
On this page