This example project demonstrates how to use PostCSS to compile Sass-compatible .scss
files to CSS. The Sass compiler is not required.
Clone the project then run npm install
to install all dependencies. PostCSS and all plugins are installed locally.
Example Sass files are provided in the src/scss/
folder. main.scss
is responsible for including all partials.
A basic example includes partials, variables, mixins, nesting, and auto-prefixing. A source map is generated in development mode when you run:
npm run css:basic
or
npx postcss src/scss/main.scss --output build/css/main.css --env development --config ./config/ --verbose
config/postcss.config.js
configures the compile process. An uncompressed CSS file is created at build/css/main.css
with a source map referenced at build/css/main.css.map
. The CSS will not work as intended because support for Sass maps and inline assets has not been added.
An advanced example includes design tokens, partials, variables, maps, mixins, nesting, asset management, media-query optimization, and auto-prefixing. A source map is generated in development mode when you run:
npm run css:dev
or
npx postcss src/scss/main.scss --output build/css/main.css --env development --verbose
The root postcss.config.js
file configures the compile process. An uncompressed CSS file is created at build/css/main.css
with a source map referenced at build/css/main.css.map
.
To watch for file changes and auto-compile the advanced example, use:
npm run css:watch
or
npx postcss src/scss/main.scss --output build/css/main.css --env development --verbose --watch
To minify the resulting CSS and omit the source map in production mode, run:
npm run css:build
or
npx postcss src/scss/main.scss --output build/css/main.css --env production --verbose