在Vue项目中配置postcss-preset-env的两种主流方案

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

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 2,                           // CSS 特性阶段 (0-4)，数字越小包含越多草案特性
      browsers: 'last 2 versions',        // 目标浏览器范围
      autoprefixer: {
        grid: true                        // 启用 CSS Grid 布局前缀（支持 IE）
      },
      features: {
        'nesting-rules': true,            // 启用 CSS 嵌套规则
        'custom-properties': true,        // 启用 CSS 变量
        'custom-media-queries': true      // 启用自定义媒体查询
      },
      preserve: false,                    // 是否保留原始 CSS 代码（默认 false）
      verbose: false                      // 是否输出详细日志
    }
  }
};

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 2,
      importFrom: './src/assets/cssVars.css'   // 指定全局 CSS 变量文件路径
      // 支持数组形式，可同时导入多个文件：
      // importFrom: [
      //   './src/assets/vars1.css',
      //   './src/assets/vars2.css',
      //   './src/assets/vars.json'        // 也支持 JSON/JS 格式
      // ]
    }
  }
};

{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead",
    "ie >= 11"
  ]
}

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 2
      // browsers 会自动从 browserslist 配置读取
    }
  }
};

.test {
  color: var(--theme-primary);
}
/* 使用嵌套规则 */
.card {
  & .title {
    font-size: 18px;
  }
}

.test {
  color: #1890ff;      /* 兜底值（来自 importFrom 导入的变量定义） */
  color: var(--theme-primary);
}
.card .title {
  font-size: 18px;
}

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

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,    // 自定义媒体查询
            'color-functional-notation': true // 现代颜色函数语法
          },
          autoprefixer: {
            grid: true                       // 启用 Grid 兼容前缀
          },
          browsers: ['last 2 versions', 'ie >= 11'],
          preserve: false,
          importFrom: './src/styles/variables.css'  // 外部变量文件
        })
      ]
    }
  }
});

// postcss.config.js
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
  plugins: [
    postcssPresetEnv({
      stage: 2,
      browsers: 'last 2 versions'
    })
  ]
};

features: {
  'nesting-rules': true,           // CSS 嵌套规则（类似 Sass）
  'custom-properties': true,       // CSS 变量（自定义属性）
  'custom-media-queries': true,    // 自定义媒体查询
  'custom-selectors': true,        // 自定义选择器
  'color-functional-notation': true, // rgba(0 0 0 / 50%) 现代语法
  'media-query-ranges': true,      // 媒体查询范围语法（width >= 500px）
  'logical-properties-and-values': true // 逻辑属性（margin-inline-start）
}

module.exports = {
  plugins: [
    'postcss-import',           // 先处理 @import
    'tailwindcss',              // 再处理 Tailwind
    'postcss-preset-env'        // 最后处理兼容性
  ]
};

module.exports = {
  plugins: {
    'postcss-preset-env': {
      verbose: true   // 输出哪些特性被转换、哪些浏览器被兼容
    }
  }
};

module.exports = {
  plugins: {
    'postcss-import': {},                     // 处理 @import
    'tailwindcss/nesting': {},                // Tailwind 嵌套支持
    tailwindcss: {},
    'postcss-preset-env': {
      stage: 2,
      features: {
        'nesting-rules': true
      },
      autoprefixer: {
        grid: 'autoplace'                     // 启用 Grid 完全兼容
      },
      importFrom: './src/styles/variables.css',
      preserve: false,
      verbose: process.env.NODE_ENV !== 'production'
    }
  }
};

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: 2,
          browsers: ['last 2 versions', 'not dead'],
          features: {
            'nesting-rules': true,
            'custom-properties': true
          },
          autoprefixer: { grid: true },
          importFrom: './src/styles/variables.css'
        })
      ]
    }
  }
});