hugo/content/en/hugo-pipes/postcss.md

title	description	date	publishdate	lastmod	categories	keywords	menu	weight	sections_weight	draft
PostCSS	Hugo Pipes can process CSS files with PostCSS.	2018-07-14	2018-07-14	2018-07-14	asset management		docs parent weight pipes 40	40	40	false

Any asset file can be processed using resources.PostCSS which takes for argument the resource object and a slice of options listed below.

The resource will be processed using the project's or theme's own postcss.config.js or any file set with the config option.

{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.PostCSS }}

{{% note %}} Hugo Pipe's PostCSS requires the postcss-cli JavaScript package to be installed in the environment (npm install -g postcss-cli) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer).

If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., npm install postcss-cli without the -g flag. {{% /note %}}

Options

config [string]

Path to the PostCSS configuration file

noMap [bool]

Default is true. Disable the default inline sourcemaps

If no configuration file is used:

use [string]

List of PostCSS plugins to use

parser [string]

Custom PostCSS parser

stringifier [string]

Custom PostCSS stringifier

syntax [string]

Custom postcss syntax

{{ $style := resources.Get "css/main.css" | resources.PostCSS (dict "config" "customPostCSS.js" "noMap" true) }}