ember-cli-less-pods

ember-cli-less-pods

Styling your pods with the less style file in the pod directory. Based on ember-cli-sass-pods implementation

Installation

ember install ember-cli-less-pods 

Example of usage ember-cli-less-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-less-pods power and generate styles:

ember g less contacts -p
ember g less components/contact-box -p

Your file structure would be:

app/

app/contacts
app/contacts/route.js
app/contacts/template.hbs
app/contacts/style.less

app/components/
app/components/contact-box
app/components/contact-box/component.js
app/components/contact-box/template.hbs
app/components/contact-box/style.less

app/styles/
app/styles/app.less
app/styles/[importFileName].less

app/styles/[importFileName].less

@import "contacts/style";
@import "components/contact-box/style";

Installation

Install ember-cli-less-pods

• ember install ember-cli-less-pods

It will automatically install ember-cli-less less preprocess package.

The import file

You need to add the import file into your main app less file.

If you use podModulePrefix your imports file would be:

pods/[podModulePrefix].less

otherwise it would be:

pods/pods.less

Add import line into your main app less file:

@import "pods/[podModulePrefix] or pods/index";

Usage

To generate styles into your pod - just run:

ember g style [path] -p

Live reload

You may setup live reload with onchange npm package

npm install --save onchange

And setting the watch instruction in your package.json

script

Enjoy styling