Postcss: This transforms CSS into an Abstract syntax tree (AST), a form of data that JavaScript can manipulate. The javascript-based PostCSS plug-in can perform different code operations. PostCSS itself does not change your CSS, it allows plug-ins to execute and transform your code. Postcss is not a preprocessor, postprocessor, or new syntax. It is a universal platform for CSS plugins, designed to make CSS writing easier, faster, and more comfortable.

1. H5 mobile terminal screen applicability solution

plugin function
cssnano To optimize and compress CSS, note the inclusion of autoprefixer in CSsnano
postcss-aspect-ratio-mini Container ratio matching
postcss-cssnext Do nested programming
postcss-px-to-viewport Replace the PX with a VW to fit various screens
postcss-write-svg Draw 1px fine lines 
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375.// The width of the window corresponds to the width of our design, which is usually 750
      viewportHeight: 667.// (Number) The height of the window is set according to the width of the 750 device.
      unitPrecision: 5.// (Number) Specifies the Number of decimal places to convert 'px' to the window unit value.
      viewportUnit: 'vw'.// (String) Specifies the window unit to convert to. Vw is recommended
      selectorBlackList: ['.ignore'.'.hairlines'].// (Array) Specifies a class that is not converted to Windows units. It can be customized and added indefinitely. One or two common class names are recommended
      minPixelValue: 1.// (Number) less than or equal to '1px' does not convert to window units, you can also set to whatever value you want
      mediaQuery: false // (Boolean) Allow converting 'px' in media queries
    },
    "cssnano": {
      preset: "advanced".autoprefixer: false."postcss-zindex": false}}}Copy the code

2. The PostCSS interface uses nested CSS styles

plugin function
postcss-import import
postcss-url url
postcss-bem Element regular naming
postcss-nested nested
postcss-preset-env Variable operation
postcss-simple-vars variable

The original link: blog.csdn.net/sjpeter/art…