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
npm install --save-dev ember-cli-postcss-fixed
Usage
Configuring Plug-ins
There are two steps to setting up postcss with ember-cli-postcss
:
- install and require the node modules for any plug-ins
- 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:
postcssOptions: plugins: module: <module> options: ...
Example
Install the autoprefixer plugin:
npm i --save-dev autoprefixer
Specify some plugins in your ember-cli-build.js:
var EmberApp = ;var autoprefixer = ; var app = postcssOptions: plugins: module: autoprefixer options: browsers: 'last 2 version' ; moduleexports = app;
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:
var app = outputPaths: app: css: 'app': '/assets/application-name.css' 'themes/alpha': '/assets/themes/alpha.css' ;
Preprocessing files with Sass
If you need to preprocess your files with node-sass you can enable it in your ember-cli-build.js:
var app = postcssOptions: plugins: module: autoprefixer options: browsers: 'last 2 version' useSass: true ;
By default this ember-cli-postcss-fixed will process .css files. However you can specify the file extension like this:
var app = postcssOptions: plugins: module: autoprefixer options: browsers: 'last 2 version' useSass: true extension: 'scss' ;
If you want to import files outside your styles folder you can include them like this:
var app = defaults // Add options here postcssOptions: useSass: true extension: 'scss' plugins: module: options: browsers: 'last 2 versions' includePaths: 'bower_components/bootstrap-sass/assets/stylesheets' ;
After including you can import the files like this
; //Imports 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss'