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 生成雪碧图