POSTCSS Basic Usage

1. POSTCSS Related website

https://www.postcss.com.cn/

https://www.ibm.com/developerworks/cn/web/1604-postcss-css/

2. Introduction

The main function of POSTCSS is only two: the first one is the abstract syntax tree structure (abstract Syntax tree,ast), which parses the CSS into JavaScript, and the second is to invoke the plugin to process the AST and get the result.

POSTCSS is generally not used alone, but integrates with existing build tools . Postcss and mainstream building tools such as Webpack, Grunt, and Gulp can be integrated. After the integration is complete, select and configure the POSTCSS plug-in that meets the functional requirements.

Examples of using the Postcss plugin in Webpack:

 var  Path = require (' path '  = ' app '  './app '  ' bundle.js ' 
        
         /\.css$/
          "style -loader!css-loader!postcss-loader "}"}, Postcss:  function   { return  [Require (' Autoprefixer ' )]; }}
        

Postcss-loader is used to process. css files and add them after Style-loader and Css-loader. An additional Postcss method is used to return the required POSTCSS plug-in. The role of require (' autoprefixer ') is to load the Autoprefixer plugin.

3. Summary

Through the POSTCSS powerful plug-in System , the CSS can be a variety of different conversion and processing, so as far as possible to the tedious and complex work to the program to deal with, and to liberate the developers.

POSTCSS Basic Usage