A PostCSS egy CSS-transzformációs keretrendszer, amely plugineket tud futtatni a CSS-en. Kisebb projektekhez nem igazán van rá szükség.
Install & setup
Telepíthetjük globálisan:
# npm i -g postcss postcss-cli
A használt plugineket pedig lokálisan (vagy ahogy jobb).
$ npm i autoprefixer
Hozzunk létre neki egy konfigot, Hugo-projektben pl. itt: assets/sass/postcss.config.js
:
module.exports = {
plugins: [
require('autoprefixer')
]
}
Ennek a helyét tegyük a Hugo-konfigba (config.yaml) egyedi paraméterként:
params:
postCSS:
config: "assets/sass/postcss.config.js"
És végül a CSS-t így illesztjük be a HTML-be (SASS-ból indulunk ki):
{{- $css := resources.Get "sass/app.scss" | toCSS .Site.Params.Sass | postCSS .Site.Params.PostCSS | fingerprint -}}
<link rel="stylesheet" href="{{ $css.Permalink }}">
Plugins
- cssnano: formáz, optimál, tömörít
- Stylelint: konfigurálható linter
- Autoprefixer
- PostCSS Assets
- Font Magician