跳到主要内容

PostCSS

2023年12月18日
柏拉文
越努力，越幸运

一、认识​

可以通过 postcss.config.js 来配置 postcss ，不过在 Vite 配置文件中已经提供了 PostCSS 的配置入口，我们可以直接在 Vite 配置文件中进行操作

二、配置​

2.1 压缩代码​

cssnano: 主要用来压缩 CSS 代码，跟常规的代码压缩工具不一样，它能做得更加智能，比如提取一些公共样式进行复用、缩短一些常见的属性值等等。

2.2 样式兼容​

postcss-preset-env: 通过它，你可以编写最新的 CSS 语法，不用担心兼容性问题。

2.3 自动添加样式前缀​

安装一个常用的 PostCSS 插件——autoprefixer, 这个插件主要用来自动为不同的目标浏览器添加样式前缀，解决的是浏览器兼容性的问题。

pnpm i autoprefixer -D

vite.config.ts 增加如下的配置

import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  },
  plugins: [react()]
});

2.4 将 px 转换为 rem 单位​

postcss-pxtorem: 用来将 px 转换为 rem 单位，在适配移动端的场景下很常用。