ember-cli-sxss-pods
v1.2.0
Published
Generates style.scss or style.sass file into pods.
Downloads
3
Maintainers
Readme
Ember-cli-sxss-pods
Enjoy styling your pods with the sass/scss style file in the pod directory.
What is ember-cli-sxss-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-sxss-pods power and generate styles:
ember g sass contacts -p
ember g sass components/contact-box -p
or
ember g scss contacts -p
ember g scss components/contact-box -p
Your awesome file structure would be:
app/
app/contacts
app/contacts/route.js
app/contacts/template.hbs
app/contacts/style.scss
app/components/
app/components/contact-box
app/components/contact-box/component.js
app/components/contact-box/template.hbs
app/components/contact-box/style.scss
app/styles/
app/styles/app.scss
app/styles/[importFileName].scss
app/styles/[importFileName].scss
@import "contacts/style";
@import "components/contact-box/style";
Installation
Install ember-cli-sxss-pods
ember install ember-cli-sxss-pods
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/sass 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 style [path] -p
Enjoy styling your pod! :)