ember-cli-sass-pods-lab

1.3.0 • Public • Published

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 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! :)

Package Sidebar

Install

npm i ember-cli-sass-pods-lab

Weekly Downloads

3

Version

1.3.0

License

MIT

Last publish

Collaborators

  • billowlabs