postcss

由于浏览器的标准没有完全统一，所以CSS3 的属性需要前缀 postcss

# postcss 相关插件autoprefixer

PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀 css样式存在兼容问题，可上 Can I Use (opens new window) 查看，如：

.box {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex
}

1
2
3
4
5
6

# postcss实践

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer")
  ]
}

1
2
3
4
5

.browserslistrc

last 2 version
>1%
ios 7

1
2
3

webpack.config.js

      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          "postcss-loader",
          'less-loader'
        ]
      },

1
2
3
4
5
6
7
8
9

# 打包结果

postcss

# 面试

问：说下postcss原理

答：postCSS利用自身的parser可以将css代码解析为AST，再利用众多插件(上文介绍的autoprefixer就是一种)改写AST，最终输出改写后的css代码

postcss

与Less这样的「css预处理器」的不同 —— postCSS的输入与输出产物都是css文件。因此，postCSS也被称为「后处理器」，因为其通常在css处理链条的最后端

postcss

loader顺序：postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序： less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader

参考：https://developer.51cto.com/art/202103/650265.htm

编辑

上次更新: 2025/07/20, 06:21:22

← 文件指纹源码深入→