Install
npm i -D postcss-load-plugins
Usage
npm i -S|-D postcss-plugin
Install plugins and save them to your package.json dependencies/devDependencies.
package.json
Create postcss
section in your projects package.json
.
App
|– client
|– public
|
|- package.json
.postcssrc
Create a .postcssrc
file.
App
|– client
|– public
|
|- (.postcssrc|.postcssrc.json|.postcssrc.yaml)
|- package.json
JSON
YAML
plugins: postcss-plugin: {}
postcss.config.js
or .postcssrc.js
You may need some JavaScript logic to generate your config. For this case you can use a file named postcss.config.js
or .postcssrc.js
.
App
|– client
|– public
|
|- (postcss.config.js|.postcssrc.js)
|- package.json
Plugins can be loaded in either using an {Object}
or an {Array}
.
{Object}
module plugins: 'postcss-plugin': ctxplugin
{Array}
module plugins: ctxplugin
Options
Plugin options can take the following values.
{}
: Plugin loads with defaults
'postcss-plugin': {} || null
⚠️
{}
must be an empty object
{Object}
: Plugin loads with options
'postcss-plugin': option: '' option: ''
false
: Plugin will not be loaded
'postcss-plugin': false
Order
Plugin order is determined by declaration in the plugins section.
plugins: 'postcss-plugin': {} // plugins[0] 'postcss-plugin': {} // plugins[1] 'postcss-plugin': {} // plugins[2]
Context
When using a function (postcss.config.js)
, it is possible to pass context to postcss-load-plugins
, which will be evaluated before loading your plugins. By default ctx.env (process.env.NODE_ENV)
and ctx.cwd (process.cwd())
are available.
Examples
postcss.config.js
module plugins: postcss-import: {} postcss-modules: ctxmodules ? {} : false cssnano: ctxenv === 'production' ? {} : false
const readFileSync = const postcss = const pluginsrc = const css = const ctx = modules: true
Maintainers
Michael Ciniawsky |
Mateusz Derks |
Contributors
Diogo Franco |