- copy-paste the package.json contents
- run
npm install
to install all dependencies - make sure to have postcss.config.json in the root of the project
- create a
src/pcss
folder containing amain.pcss
file - create a
.env
file in the root containing theenv=develop
flag
$ npm run postcss # compiles src/pcss/main.pcss -> dist/css/style.css
$ npm run postcss:watch # runs above but in watch mode
dist/
├─ index.html
├─ css/
│ ├─ style.css
src/
├─ pcss/
│ ├─ main.pcss
.env
package.json
postcss.config.js
With the current packages installed, the following features are supported:
@import "anotherfile.css";
.someClass {
background-color: #00ff00;
/** nest child classes */
.nestedClass {
background-color: #ff0000;
}
/** compose classnames from parent selector & */
&__composed-class {
background-color: #0000ff;
}
}
other utilities run in the background, like autoprefixer
and cssnano
. Docs to all the plugins: