ember-cli-sass-pods-lab/README.md

Generates style.scss file into pods.

# Ember-cli-sass-pods

Enjoy styling your pods with the sass style file in the pod directory.

## What is ember-cli-sass-pods?
Say you have a contacts route and contact-box component.
##### Generate regular route and component:
```
ember g route contacts -p
ember g component contact-box -p
```
##### Then, use ember-cli-sass-pods power and generate styles:
```
ember g styles contacts -p
ember g styles components/contact-box -p
```

##### Your awesome file structure would be:
```
app/

app/contacts
app/contacts/route.js
app/contacts/template.hbs
app/contacts/styles.scss

app/components/
app/components/contact-box
app/components/contact-box/component.js
app/components/contact-box/template.hbs
app/components/contact-box/styles.scss

app/styles/
app/styles/app.scss
app/styles/[importFileName].scss
```
##### app/styles/[importFileName].scss
```
@import "contacts/styles";
@import "components/contact-box/styles";
```

## Installation

##### Install ember-cli-sass-pods

* `ember install ember-cli-sass-pods-lab`

It will automatically install [ember-cli-sass](https://github.com/aexmachina/ember-cli-sass#ember-cli-sass) sass preprocess package.

##### The import file
You need to add the import file into your main app scss file.

If you use podModulePrefix your imports file would be:
```
[podModulePrefix].scss
```
otherwise it would be:
```
pods.scss
```
Add import line into your main app scss file:

```
@import "[podModulePrefix] or pods";
```

##### Watched folder
Add paths for watching in the 'ember.cli-build.js':
```
var app = new EmberApp(defaults, {
  sassOptions: {
    includePaths: ['app']
  }
});
```

## Usage

To generate styles into your pod - just run:

```
ember g styles [path] -p
```

Enjoy styling your pod! :)