andywerwebpack-blocks - PostCSS
This is the postcss block providing PostCSS configuration.
Usage
const { createConfig, match } = require('@webpack-blocks/webpack')
const { css } = require('@webpack-blocks/assets')
const postcss = require('@webpack-blocks/postcss')
module.exports = createConfig([
match(['*.css', '!*node_modules*'], [
css(),
postcss()
])
])NOTE: the postcss block handles only the postcss transformation, you must use the css block if you want to require the css in your browser.
We recommend you to configure PostCSS using the postcss.config.js file (see
PostCSS loader usage):
// postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [autoprefixer({ browsers: ['last 2 versions'] })]
}But you can pass configuration directly to the postcss block:
const { createConfig, match } = require('@webpack-blocks/webpack')
const { css } = require('@webpack-blocks/assets')
const postcss = require('@webpack-blocks/postcss')
const autoprefixer = require('autoprefixer')
module.exports = createConfig([
css(),
postcss({
plugins: [autoprefixer({ browsers: ['last 2 versions'] })]
/* Other PostCSS options */
})
])Options
PostCSS options
parser (optional)
Package name of a custom PostCSS parser to use. Pass for instance 'sugarss' to be able to write
indent-based CSS.
stringifier (optional)
Package name of a custom PostCSS stringifier to use.
syntax (optional)
Package name of a custom PostCSS syntax to use. The package must export a parse and a stringify
function.
plugins (optional)
Array of PostCSS plugins.
webpack-blocks
Check out the
Released under the terms of the MIT license.