【基础知识】PostCSS 基本用法

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注意事项

PostCSS类似于less、sass，目的在于让css变得像一门编程语言，支持变量

注意，如果使用本地ui框架（非CDN连接），使用PostCSS会导致框架失效（px单位转换成vmin），使用PostCSS的黑名单属性或者使用CDN加载可以避免

1、PostCSS会自动添加浏览器的前缀（.postcssrc.js  文件中的 autoprefixer 属性），但是默认添加谷歌浏览器的前缀，修改package.json文件中的 browserslist 属性可以让你postcss支持更多的浏览器，（browserslist 的第一个参数为筛选浏览器使用的比例）

2、使用vue创建的项目，在项目的根目录，有一个.postcssrc.js 文件，，在文件中可以添加插件，常用的插件有

 2.1、postcss-px-to-viewport （把px单位转换成设置的单位）

    'postcss-px-to-viewport':{
      viewportWidth:720,//视窗可视区域宽（设计稿的宽度）
      viewportUnit:'vmin',//默认以哪一条边为主做计算（vmin是以最小的边为计算，vmax是以最大的边为计算）
    }
 

3、总结

通过 PostCSS 强大的插件体系，可以对 CSS 进行各种不同的转换和处理，从而尽可能的把繁琐复杂的工作交由程序去处理，而把开发人员解放出来。