ember-cli-postcss-fixed

DEPRECATED PLEASE USE ember-cli-css-preprocess

This is a modification of https://www.npmjs.com/package/ember-cli-postcss

It adds functionality for multiple file processing and for preprocessing using node-sass.

Use postcss to process your css with a large selection of JavaScript plug-ins.

Installation

1npm install --save-dev ember-cli-postcss-fixed

Usage

Configuring Plug-ins

There are two steps to setting up postcss with ember-cli-postcss:

1. install and require the node modules for any plug-ins
2. provide the node module and plug-in options as a postcssOptions object in the Brocfile

The postcssOptions object should have a property plugins, which is an array of objects that contain a module property and an options property:

1postcssOptions: {
2  plugins: [
3    {
4      module: <module>,
5      options: {
6        ...
7      }
8    }
9  ]
10}

Example

Install the autoprefixer plugin:

1npm i --save-dev autoprefixer

Specify some plugins in your ember-cli-build.js:

1var EmberApp = require('ember-cli/lib/broccoli/ember-app');
2var autoprefixer = require('autoprefixer');
3
4var app = new EmberApp({
5  postcssOptions: {
6    plugins: [
7      {
8        module: autoprefixer,
9        options: {
10          browsers: ['last 2 version']
11        }
12      }
13    ]
14  }
15});
16
17module.exports = app.toTree();

Processing multiple files

If you need to process multiple files, it can be done by configuring the output paths in your ember-cli-build.js:

1	var app = new EmberApp({
2  outputPaths: {
3    app: {
4      css: {
5        'app': '/assets/application-name.css',
6        'themes/alpha': '/assets/themes/alpha.css'
7      }
8    }
9  }
10});
11

Preprocessing files with Sass

If you need to preprocess your files with node-sass you can enable it in your ember-cli-build.js:

1	var app = new EmberApp({
2        postcssOptions: {
3          plugins: [
4            {
5              module: autoprefixer,
6              options: {
7                browsers: ['last 2 version']
8              }
9            }
10        ],
11        useSass: true
12        }
13      });

By default this ember-cli-postcss-fixed will process .css files. However you can specify the file extension like this:

1	var app = new EmberApp({
2        postcssOptions: {
3          plugins: [
4            {
5              module: autoprefixer,
6              options: {
7                browsers: ['last 2 version']
8              }
9            }
10        ],
11        useSass: true,
12        extension: 'scss'
13        }
14      });

If you want to import files outside your styles folder you can include them like this:

1  var app = new EmberApp(defaults, {
2    // Add options here
3    postcssOptions: {
4        useSass: true,
5        extension: 'scss',
6        plugins: [
7            {
8                module: require('autoprefixer'),
9                options: {
10                    browsers: ['last 2 versions']
11                }
12            }
13        ],
14        includePaths: [
15            'bower_components/bootstrap-sass/assets/stylesheets'
16        ]
17    }
18  });

After including you can import the files like this

1@import "bootstrap"; //Imports 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss'