PostCSS 基本用法

一、postcss相关网站

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

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

二、介绍

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 能够操做的 抽象语法树结构（Abstract Syntax Tree，AST），第二个就是调用插件来处理 AST 并获得结果。

PostCSS 通常不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 均可以进行集成。完成集成以后，选择知足功能需求的 PostCSS 插件并进行配置。

Webpack 中使用 PostCSS 插件示例：

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 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 以后。经过一个额外的 postcss 方法来返回所须要使用的 PostCSS 插件。require('autoprefixer') 的做用是加载 Autoprefixer 插件。

三、总结

经过 PostCSS 强大的插件体系，能够对 CSS 进行各类不一样的转换和处理，从而尽量的把繁琐复杂的工做交由程序去处理，而把开发人员解放出来。