PostCSS

postcss 是一个使用JS开发插件来转换CSS的工具。

大量CSS转换工具都是基于postcss开发的，例如autoprefixer处理CSS语法兼容、cssnano压缩CSS产物。

Sass、Less、Stylus是将其语法转为CSS语法，PostCSS是将CSS修改为新的CSS。

原理

PostCSS 将 CSS 文件转换为抽象语法树（AST），提供一套API来分析和修改AST，最后根据AST生成新的CSS。

postcss对于CSS的作用，相当于babel对于JavaScript的作用。

用法

以autoprefixer插件用法为例

webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

rollup / vite

postcss.config.js配置同上

//vite.config.js
import { defineConfig } from 'vite'
import postcss from 'rollup-plugin-postcss'

export default defineConfig({
  plugins: [
    postcss({
      plugins: []
    })
  ]
})

PostCSS ​

原理 ​

用法 ​

webpack ​

rollup / vite ​

参考资料 ​

PostCSS

原理

用法

webpack

rollup / vite

参考资料