postcss 深入

github - postcss、search - postcss - plugins

常规用法

《基础篇-资源打包/02-打包css-资源》

重新认识一下postcss

postcss 和 less、sass 一样，都是编译css成最终浏览器能够给识别的css源代码，我们可以直接的在node端，运行：

let postcss = require('postcss')
const plugins = [] // 添加 postcss支持的各种插件

postcss(plugins).process(css, { from, to }).then(result => {
  console.log(result.css)
})

postcss也可以传入自己的配置，来告诉node，我们应该如何的编译 css

插件 plugin

拓展postcss的能力，比如

• 处理图片生成雪碧图：postcss-sprites

• 支持嵌套语法：postcss-nested

• css语法的polyfill：postcss-preset-env 一直支持最新的css语法，使用postcss.config.js配置插件

  /* use stage 3 features + css nesting rules */
  postcssPresetEnv({
    stage: 3,
    features: {
      'nesting-rules': true
    },
    browsers: 'last 2 versions',
    // 内置 autoprefixer 的功能，只需要开启即可，这里的option就是autoprefixer的功能
    autoprefixer: { 
      grid: true,
      flexbox: 'no-2009',
    }
  })
  

• 通过添加前缀兼容低版本浏览器：autoprefixer，autoprefixer支持在项目跟目录使用 .browserslistrc 文件 或者 package.json 的 browserslist 配置

• 统一平台的css样式：postcss-normalize 尽量让所有平台的css 看起来一致

• 修复felxbugs：postcss-flexbugs-fixes

postcss-loader

基础篇 适合在外部使用，一旦当我们需要配置自己的脚手架的时候，我们需要将postcss.config.js 的内容移交给 postcss-loader处理：

{
  test: /\.post\.css$/i,
  loader: "postcss-loader",
  options: {
    postcssOptions: {
      plugins: [
        'postcss-flexbugs-fixes',
        // 注意观察 postcss-preset-env options配置方式
        [
          'postcss-preset-env',
          {
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          },
        ],
        'postcss-normalize',
      ],
    },
  },
}