This ColdBox Elixir extension allows you easy to compile PostCSS.
$ npm install coldbox-elixir-postcss --save-devRequire this extension at the top of your gulpfile.js:
require( "coldbox-elixir-postcss" );Then you have access to the postcss function inside ColdBox Elixir:
elixir( function( mix ) { // app.css, *.css, **/*.css mix.postcss( "app.css" ); } );elixir(function(mix) { mix.postcss( "app.css", { plugins: [ require( "postcss-nested" ) ] } ); } );You can set the options using other parsers like scss, sugarss etc.
elixir( function( mix ) { mix.postcss( "app.css", { options: { parser: require( "postcss-scss" ) } } ); } );Use parser and plugins.
elixir( function( mix ) { mix.postcss( "app.css", { options: { parser: require("sugarss") }, plugins: [ require("postcss-nested") ], } ); } );This extension accept two parameters:
- An string of files.
- An object of options.
Common options:
options: See postcss common options.output: destination"s pathplugins: postcss"s plugins.srcPath: source's directory.sourcemaps: enable source map.watchs: additional watch directories.
{ options : {}, output : "public/css", plugins : [], srcPath : "resources/assets/postcss/", sourcemaps : true, // default value is the same as `elixir.config.sourcemaps` watchs : [], }