Preprocess your stylesheets with multiple preprocessors.
Currently supported preprocessors:
Please feel free to fork in order to add more processors!
You can determine in which order the stylesheets are processed!
ember install ember-cli-css-preprocess
All the configuration for this plugin is stored in the ember-cli-build.js
in the root-directory of your ember application.
Search for the following lines:
var app = new EmberApp(defaults, {
// Add options here
...
And add the the basic options:
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [],
extension: 'css'
}
...
Currently there a two available preprocessors which you can chain in any order (even multiple times if you want).
Supported processors:
To add on simply pass in an object to the processors
-Array containing a type
-Property with the processor title.
Furthermore you have to install the corresponding npm-module with the same name (e.g. npm install autoprefixer --save-dev
).
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'node-sass',
sourcemaps: true, // enables sourcemaps
options: {}
}
],
extension: 'scss'
}
...
By changing the extension
-property you can specify the extension of your stylesheets. Because we are only processing our sheets with Sass we set the extension to scss
.
Annotation: You can also pass all setting you could pass to node-sass by setting the options
-object in the processor object. By default the only settings are the includePath
which is set to your styles
-folder and the sourcemap settings if sourcemaps
is set to true
. This allows you to include any stylesheet in your folder with the @import
-rule
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'postcss',
plugins: [
{
module: require('autoprefixer'),
options: {
browsers: [
'last 2 versions'
]
}
}
]
}
],
extension: 'css'
}
...
This is a basic postcss implementation using the autoprefixer plugin.
The plugin
-array is filled with objects with the module
and the options
properties. The latter obviously contains the options which are passed into the module/plugin when processing your stylesheets.
Annotation: Before requiring any postcss-plugin you have to install it via npm (e.g. npm install autoprefixer --save
).
You can also add a custom parser or syntax by adding it to the processor object. Here is an example which uses the postcss-scss parser
(for adding a syntax, use the syntax
property):
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'postcss',
parser: require('postcss-scss'),
//syntax: require('postcss-scss'),
plugins: [
{
module: require('autoprefixer'),
options: {
browsers: [
'last 2 versions'
]
}
}
]
}
],
extension: 'css'
}
...
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'less'
}
],
extension: 'css'
}
...
To include any less plugin you can make use of the plugins
-array, it is handled like the postcss-plugin array.
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'node-sass'
},
{
type: 'postcss',
plugins: [
{
module: require('autoprefixer'),
options: {
browsers: [
'last 2 versions'
]
}
}
]
}
],
extension: 'css'
}
...
This example should clarify how to chain preprocessors. The position inside the processors
-array determines the order in which the stylesheets are processed by each preprocessors (from top to bottom).
Multiple stylesheets are added by using the outputPaths
-property (, which is not part of the styleProcessorOptions
-property).
Configuring Output Paths (Ember CLI Reference)
In addition to the default configuration you can add an extension to your css
-value.
... // styleProcessorOptions
extension: 'scss' // specified extension, overrides default: css
},
outputPaths: {
app: {
css: {
'app': 'assets/lel.css', // will parse app/styles/app.scss
'amk.css': 'assets/toll.css', //will parse app/styles/amk.css
'hippo.less': 'assets/eichhorn.css', //will parse app/styles/hippo.less
'trolol/bars': 'assets/foo.css' //will parse app/trolol/bars.scss
}
}
}
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'postcss',
filter: ['test.css'],
plugins: [
{
module: require('autoprefixer'),
options: {
browsers: [
'last 2 versions'
]
}
}
]
},
{
type: 'node-sass'
}
],
extension: 'css'
}
...
With this setup the postcss processor will only process the file test.css
. The filter
property can either be a string or an array of strings.
An example for using the glob pattern:
var app = new EmberApp(defaults, {
// Add options here
styleProcessorOptions: {
processors: [
{
type: 'node-sass',
filter: ['*.scss']
},
{
type: 'less',
filter: ['*.less']
}
],
extension: 'css'
},
outputPaths: {
app: {
css: {
'app': 'assets/lel.css', // input file contents will equal input file contents
'amk.css': 'assets/toll.css', // input file contents will equal input file contents
'hippo.less': 'assets/eichhorn.css', // will only be processed by less processor
'trolol.scss': 'assets/foo.css' // will only be processed by less processor
}
}
}
...