PostCSS 让js可以处理css

GitHub 中文readmie
PostCSS 中文网（建设中）

PostCSS 不是样式预处理器
是 CSS 语法转换的工具，但不严格遵循css规范，只要符合css语法规则就可以被处理。这也让提前实现新提案成为可能。

使用

webpack 中使用 postcss-loader

{
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader', // 将 css 插入到 dom 中
          },
          {
            loader: 'css-loader', // 处理 `import "./style.css";`
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader' // 将 css 转化为 抽象语法树 ，方便后续插件处理
          }
        ]
      }
    ]
  }
}

postcss.config.js 中注册插件

module.exports = {
  plugins: [
    require('autoprefixer'),
    ···
  ]
}

vite 中内置了 postcss

命令行方法 postcss-cli

postcss --use autoprefixer -c options.json -o main.css css/*.css

postcss-js

主流插件

Autoprefixer 自动添加浏览器前缀

npm install autoprefixer -D

vite 配置

// vite.config.js
import autoprefixer from "autoprefixer"
···
export default defineConfig({
···
  css: {
    postcss: {
      plugins: [autoprefixer], //进行注册
    },
  },
})

.browserslistrc 文件设置目标兼容浏览器

cssnano 压缩css

postcss-preset-env 支持使用未来的css特性

StyleLint 规范CSS

PostCSS Sprite 生成雪碧图