Ember CLI Compass Compiler

0.5.0 verified Fri May 01 auth: no javascript abandoned

Addon for Ember CLI that integrates the Compass CSS authoring framework via a Ruby-based compiler. Version 0.5.0 is the current stable release, but the project has been unmaintained since 2016. It requires Ruby and the compass gem to be installed on the system. Unlike broccoli-sass or other pure JavaScript solutions, this addon delegates compilation to the external compass command, providing full Compass library support. It automatically compiles .scss files in app/styles, with the main file expected to be app.scss (breaking change from earlier versions that required appname.scss). Supports custom import paths and compassOptions overrides via Brocfile. Known issues include missing support for modern Ember CLI versions, Ruby dependency overhead, and incompatibility with newer Node.js versions.

Common errors

error Cannot read property 'compassOptions' of undefined ↓

cause Addon's index.js missing included function or not calling super.

fix

Add 'included: function(app) { this._super.included(app); }' to index.js.

error Error: compass not found ↓

cause Ruby compass gem not installed or not in PATH.

fix

Run 'gem install compass' and verify with 'which compass'.

error TypeError: Cannot read property 'compassOptions' of undefined ↓

cause Same as above but from EmberApp constructor.

fix

Ensure compassOptions is passed to new EmberApp() only if needed, or check Ember CLI version.

Warnings

breaking Main SCSS file must be named app.scss (v0.2.0 breaking change) ↓

fix Rename your main SCSS file from <appname>.scss to app.scss.

gotcha Requires Ruby and compass gem to be installed globally ↓

fix Run 'gem install compass' and ensure Ruby is available in PATH.

deprecated Addon is unmaintained; does not work with Ember CLI > 2.x or Node > 6 ↓

fix Migrate to a pure JavaScript solution like ember-cli-sass or broccoli-sass.

gotcha Cannot read property 'compassOptions' of undefined ↓

fix Ensure addon's index.js defines an 'included' function that calls this._super.included(app).

gotcha Windows compatibility issues with Ruby/compass subprocess ↓

fix Use a Unix-like environment or switch to a Node-based compiler.

Install

npm install ember-cli-compass-compiler

yarn add ember-cli-compass-compiler

pnpm add ember-cli-compass-compiler

Imports

default (EmberApp options)
wrong
```
var app = EmberApp.create({ compassOptions: ... })
```
correct
```
new EmberApp({ compassOptions: { outputStyle: 'expanded' } })
```
compassOptions is passed to the EmberApp constructor as a property of the options object.
compass import in SCSS
wrong
```
@import 'compass'
```
correct
```
@import "compass";
```
SCSS uses double quotes for imports.

importPath option

wrong

compassOptions: { importPaths: [...] }

correct

compassOptions: { importPath: ['bower_components/some-dir'] }

The option is named importPath (singular).

Quickstart

Install the addon, configure compassOptions, and use Compass mixins in app.scss.

// Install the addon
// ember install ember-cli-compass-compiler

// In Brocfile.js (for Ember CLI < 2.x)
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
  compassOptions: {
    outputStyle: 'expanded',
    require: ['sass-css-importer', 'susy']
  }
});

// In app/styles/app.scss
@import "compass";

.round-rect-button {
  @include border-radius(4px, 4px);
}

module.exports = app.toTree();