HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star
ASSET MANAGEMENT

PostCSS

Hugo Pipes can process CSS files with PostCSS.

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 }}

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.

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) }}
  • About Hugo
    • Overview
    • Hugo and GDPR
    • Hugo 0.32 HOWTO
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • Themes
    • Themes Overview
    • Install and Use Themes
    • Theme Components
    • Create a Theme
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Supported Content Formats
    • Front Matter
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • Built-in
    • Cast
    • Collections
    • Compare
    • Crypto
    • Data
    • Encoding
    • Fmt
    • Hugo
    • Images
    • Inflect
    • Lang
    • Math
    • OS
    • Partials
    • Path
    • Reflect
    • Resources
    • Safe
    • Site
    • Strings
    • Templates
    • Time
    • Transform
    • URLs
  • Objects
    • Objects Overview
    • Site Objects
    • Page Objects
    • Shortcode Objects
    • Time Objects
    • Taxonomy Objects
    • File Objects
    • Menu Entry Objects
    • Hugo Objects
    • Git Objects
    • Sitemap Objects
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes Introduction
    • SASS / SCSS
    • PostCSS
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Host-Agnostic Deploys with Nanobox
    • Host on Netlify
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“PostCSS” was last updated: August 24, 2018: Spell out the npm command for installing PostCSS (64b9ecc7)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Themes
  • Content Management
  • Templates
  • Functions
  • Objects
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance