Update postprocess.md

- make example files clear
- remove framework specific configuration from this example
- Tailwind CSS users will find many examples elsewhere
This commit is contained in:
Mark Ayers 2021-03-27 06:36:04 -04:00 committed by Bjørn Erik Pedersen
parent 1172fb6d09
commit 59bd9656fa

View File

@ -35,11 +35,15 @@ There are several ways to set up CSS purging with PostCSS in Hugo. If you have a
The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [config/production](/getting-started/configuration/#configuration-directory). The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [config/production](/getting-started/configuration/#configuration-directory).
`config.toml`
```toml ```toml
[build] [build]
writeStats = true writeStats = true
``` ```
`purgecss.config.js`
```js ```js
const purgecss = require('@fullhuman/postcss-purgecss')({ const purgecss = require('@fullhuman/postcss-purgecss')({
content: [ './hugo_stats.json' ], content: [ './hugo_stats.json' ],
@ -48,14 +52,6 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
return els.tags.concat(els.classes, els.ids); return els.tags.concat(els.classes, els.ids);
} }
}); });
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
]
};
``` ```
Note that in the example above, the "CSS purge step" will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS: Note that in the example above, the "CSS purge step" will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS: