1. Postcss related websites
https://www.ibm.com/developerworks/cn/web/1604-postcss-css/
2. Introduction
There are only two main functions of PostCSS: the first is to parse CSS into an abstract syntax tree structure (Abstract Syntax Tree, AST) that JavaScript can operate, and the second is to call plugins to process AST and get the result.
PostCSS is generally not used on its own, but is integrated with existing build tools . PostCSS integrates with major build tools like Webpack, Grunt, and Gulp. After the integration is complete, select the PostCSS plugin that meets your functional needs and configure it.
Example of using PostCSS plugin in Webpack:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'app'),
entry: './app',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [require('autoprefixer')];
}
}
postcss-loader is used to process .css files and is added after style-loader and css-loader. Returns the required PostCSS plugin via an additional postcss method. The effect of require('autoprefixer') is to load the Autoprefixer plugin.
3. Summary
Through the powerful plug-in system of PostCSS , CSS can be transformed and processed in various ways, so that the tedious and complicated work can be handed over to the program as much as possible, and the developers are liberated.