在 Vue 项目中配置 postcss-preset-env

在 Vue 项目中配置 postcss-preset-env，根据你使用的构建工具不同，配置方式也有所区别。以下是 Vue CLI (Webpack) 和 Vite 两种主流方案的详细配置：

一、Vue CLI (Webpack) 项目配置

1. 安装依赖

npm install postcss postcss-preset-env --save-dev

2. 创建/修改 postcss.config.js

在项目根目录创建 postcss.config.js 文件：

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 2,              // CSS 特性阶段 (0-4)，数字越小包含越多的草案特性
      browsers: 'last 2 versions',  // 目标浏览器范围
      autoprefixer: {
        grid: true           // 启用 CSS Grid 布局前缀
      },
      features: {
        'nesting-rules': true,      // 启用嵌套规则
        'custom-properties': true,   // 启用 CSS 变量
        'custom-media-queries': true // 启用自定义媒体查询
      }
    }
  }
};

3. 使用外部 CSS 变量文件时的特殊配置

如果你在 .vue 文件中使用全局 CSS 变量，需要配置 importFrom 让插件能找到变量定义：

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 2,
      importFrom: './src/assets/cssVars.css'  // 指定全局 CSS 变量文件路径
      // 支持数组形式：importFrom: ['./src/assets/vars1.css', './src/assets/vars2.css']
    }
  }
};

4. 验证配置是否生效

配置正确后，编译后的 CSS 会自动添加兼容性处理。例如 CSS 变量会生成兜底值：

/* 源代码 */
.test {
  color: var(--hxm-primary-1);
}

/* 编译后（浏览器不支持 CSS 变量时使用兜底值） */
.test {
  color: #1890ff;  /* 兜底值 */
  color: var(--hxm-primary-1);
}

---

二、Vite + Vue 项目配置

1. 安装依赖

npm install postcss-preset-env --save-dev

2. 在 vite.config.js 中配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcssPresetEnv from 'postcss-preset-env';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcssPresetEnv({
          stage: 1,                    // 启用更多新特性
          features: {
            'nesting-rules': true,      // CSS 嵌套规则
            'custom-properties': true,  // CSS 变量
            'custom-media-queries': true
          },
          autoprefixer: {
            grid: true
          },
          browsers: ['last 2 versions', 'ie >= 11']  // 指定浏览器版本
        })
      ]
    }
  }
});

3. 或使用独立的 postcss.config.js

Vite 也支持读取 postcss.config.js 文件：

// postcss.config.js
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({
      stage: 2,
      browsers: 'last 2 versions'
    })
  ]
};

---

三、常用配置选项说明

选项	类型	说明
stage	number (0-4)	CSS 特性阶段，默认 2。0=实验性，4=稳定
browsers	string/array	目标浏览器，如 'last 2 versions' 或 ['> 1%', 'ie >= 11']
features	object	启用/禁用特定 CSS 特性
autoprefixer	object	传递给 autoprefixer 的配置，如 { grid: true }
preserve	boolean	是否保留原始 CSS 代码，默认 false
importFrom	string/array	导入外部 CSS/JS/JSON 文件中的变量定义

---

四、注意事项

1. Vue CLI 配置不生效问题 ：如果使用外部 CSS 变量文件，务必配置 importFrom 选项

2. 浏览器版本 ：必须指定 browsers 选项，否则 autoprefixer 可能无法正确处理前缀

3. Vite 内置支持：Vite 已内置 PostCSS 支持，只需安装插件并配置即可

4. 插件顺序 ：如果使用多个 PostCSS 插件，建议 postcss-preset-env 放在后面执行

通过以上配置，你就可以在 Vue 项目中使用最新的 CSS 特性（如嵌套规则、CSS 变量、自定义媒体查询等），而无需担心浏览器兼容性问题。