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 |