ember-cli-eyeglass/README.md

# `ember-cli-eyeglass` [![Build Status](https://travis-ci.org/sass-eyeglass/ember-cli-eyeglass.svg?branch=master)](https://travis-ci.org/sass-eyeglass/ember-cli-eyeglass)<Paste>

This Ember CLI Addon makes it trivial to compile your sass files with
eyeglass support via node-sass.

## Installation

`yarn add ember-cli-eyeglass`

Then rename all your `.css` files so they have the `.scss` extension.

## Configuration

In your application's ember-cli-build.js the key `"eyeglass"` can be
set to an options object that will be passed to broccoli-eyeglass. For
details on the options available, please read the [broccoli-eyeglass
options documentation](https://github.com/sass-eyeglass/broccoli-eyeglass#options).

### Apps

```js
// path/to/app/ember-cli-build.js
const app = new EmberApp(defaults, {
  eyeglass: {
    /* Enable discovery of Sass files to compile.
       All files not beginning with an underscore will be compiled. */
    discover: true,
     /* apply other broccoli-eyeglass options here */
     /* apply node-sass options here */
    eyeglass: {
      /* eyeglass options */
    }
  }
});
```

Given the following layout:

```
app/styles/app.scss
           other.scss
           _shared.scss
```


Will result in:

`assets/<app-name>.css` containing the compiled output of `app/styles/app.scss`
`assets/foo.css` containing the compiled output of `app/styles/foo.scss`

The contents of `app/styles/_shared.scss` will not be compiled directly but will be available for import. For example, `app.scss` can have `@import "shared";` to include the contents of that file in its output.
(Note: files beginning with an underscore are called *partials* in Sass's documentation.)


### Addons

To make an ember-addon (both in-repo and from node_modules) behave as an eyeglass module, add `"eyeglass-module"` to the `package.json`'s `"keywords"` array and add the [relevant config](https://github.com/linkedin/eyeglass/tree/master/packages/eyeglass#writing-an-eyeglass-module) to the `"eyeglass"` property in `package.json`. To compile the addon's styles from `addon/styles` using eyeglass, add `ember-cli-eyeglass` as a dependency of the addon in question.

ember-addons have two important directories, `app` and `addon`:

#### my-addon/app/styles

These assets are only considered for top-level addons, stylesheets in `app` directories of nested-addons are ignored.

Given the following folder structure:

```
my-addon/app/styles/
                   /my-addon.scss
                   /my-other-file.scss
                   /_a-partial.scss
                      
```

* `my-addon/app/styles` - The non-partial `scss` files will become independent css files in the built output.
* `my-addon/addon/styles` - The non-partial `scss` files will be compiled and the output merged into your application's `vendor.css`;


Will result in:

`assets/my-addon.css` containing the compiled output of `my-addon/app/styles/my-addon.scss`
`assets/my-other-file.css` containing the compiled output of `my-addon/app/styles/my-other-file.scss`
`_a-partial.scss` will not be included by default, unless the files in `my-app/app/styles/` or `my-addon/app/styles` import it.



#### my-addon/addon/styles/

These assets merged namespaced by the current addons name for all addons.

Given the following folder structure:

```
my-addon/addon/styles/
                     /_shared.scss
                     /my-addon.scss
                     /secondary.scss             
```

The contents of `my-addon/addon/styles/my-addon.scss` will be added to `assets/vendor.css`.
The contents of `my-addon/addon/styles/secondary.scss` will be added to `assets/vendor.css`.
The contents of `my-addon/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.

### Engines

Engines are enhanced addons, who optionally (if lazy) provide alternative `app` and `vendor` output.

```js
// path/to/engine/index.js
const app = new EmberEngine(defaults, {
  eyeglass: {
    discover: true,
    /* broccoli-eyeglass options */
    /* node-sass options */
    eyeglass: {
      /* eyeglass options */
    }
  }
});
```
 
Given the following folder structure:

```
my-engine/
         /app/styles/
                    /my-engine.scss
                    /my-other-file.scss
                    /_shared.scss
         /addon/styles/
                      /_shared.scss
                      /my-engine.scss
                      /secondary.scss             
```

If this is an eager engine:
 

The contents of `my-engine/app/styles/my-engine.scss` will become `dist/assets/my-engine.css`
The contents of `my-engine/app/styles/my-other-file.scss` will become `dist/assets/my-other-file.css`
The contents of `my-engine/app/styles/_shared.scss` will only be included if `my-engine.scss` or `my-other-file.scss` explicitly import them.

The contents of `my-engine/addon/styles/my-addon.scss` will be added to `dist/assets/vendor.css`
The contents of `my-engine/addon/styles/secondary.scss` will be added to `dist/assets/vendor.css`
The contents of `my-engine/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.

If this is a lazy engine:

The contents of `my-engine/app/styles/my-engine.scss` will be ignored
The contents of `my-engine/app/styles/my-other-file.scss` will be ignore
The contents of `my-engine/app/styles/_shared.scss` will be ignored unless imported.

The contents of `my-engine/addon/styles/my-addon.scss` will be added to `dist/engine-dist/my-engine/assets/engine.css`
The contents of `my-engine/addon/styles/secondary.scss` will be added to `dist/engine-dist/my-engine/assets/engine.css`
The contents of `my-engine/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.


## Building

* `ember build`

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).