Postcss Reloader

Write your postcss and compile to css files in situe which can then be required into any web project which is using webpack

It is designed to work seamlessly with React Scripts which is probably the best tool for creating the react webstack

Also when you write failing postcss you get the error on the page (don't worry it is css trickery)

NB

Any file which starts with _ will not be build to css on assumption it is for importing or meant to be ignored

Usage

npm i -D postcss-reloader

package.json

"postcss-reloader": {
  "dir": "./src",
  "ext": ".pcss",
  "debug": true,
  "watch": true,
  "loaders": ["postcss-import", "postcss-cssnext"]
}

and then extend your scripts with

"scripts": {
  "start": "postcss-reloader start | react-scripts start",
  "build": "postcss-reloader build | react-scripts build"
}

build will override your watch param and without build or start it will default to just running your options

Script

const postcssReloader = require('postcss-reloader')
postcssReloader({
  "dir": "./src",
  "ext": ".pcss",
  "debug": true,
  "watch": true
  "loaders": ["postcss-import", "postcss-cssnext"]
})

Options

Param	Type	Comment
dir	string	NOT OPTIONAL
ext	string	default '.pcss'
debug	bool	default true
watch	bool	default false
loaders	array:strings	default [] You have to have these installed in your project for it to work
onError	function	default adding error on page