如何配置PostCSS仅编译指定目录（结合Vite环境变量）

1. 定义环境变量 #

在项目根目录的对应环境文件（如.env.development或.env.production）中添加要指定编译的目录，用逗号分隔多个路径：

VITE_CSS_TARGET_DIRS=src/my-styles,packages/my-custom-components

2. 修改postcss.config.js #

更新配置，读取环境变量并设置仅处理指定目录的CSS文件：

import * as path from 'path'
import { fileURLToPath } from 'url'
import { dirname } from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export default (ctx) => {
  // 读取环境变量并解析为目录数组
  const targetDirs = process.env.VITE_CSS_TARGET_DIRS?.split(',') || []
  // 转换为PostCSS可识别的glob匹配模式
  const includePatterns = targetDirs.map(dir => 
    path.resolve(process.cwd().trim(), dir.trim()) + '/**/*.css'
  )

  return {
    map: true,
    // 仅处理指定目录下的CSS文件
    include: includePatterns.length > 0 ? includePatterns : undefined,
    plugins: {
      'postcss-import': {
        path: path.resolve('src/assets/styles')
      },
      'postcss-mixins': {
        mixinsDir: path.resolve('src/assets/styles')
      },
      'postcss-extend': {},
      'postcss-simple-vars': {},
      'postcss-nested': {},
      'postcss-color-function': {},
      autoprefixer: {
        overrideBrowserslist: [
          'last 4 Chrome versions',
          'last 4 Firefox versions',
          'last 4 Edge versions',
          'last 4 Safari versions',
          'last 4 Android versions',
          'last 4 ChromeAndroid versions',
          'last 4 FirefoxAndroid versions',
          'last 4 iOS versions'
        ]
      },
      tailwindcss: {
        config: path.join(__dirname, 'tailwind.config.js')
      }
    }
  }
}

3. 验证效果 #

启动项目或执行构建命令时，PostCSS只会处理VITE_CSS_TARGET_DIRS中指定目录下的CSS文件，其他目录的文件会被跳过。

注意事项 #

• 如果需要处理SCSS/SASS等预处理器文件，可将glob模式改为/**/*.{css,scss,sass}
• 若未设置VITE_CSS_TARGET_DIRS，PostCSS会默认处理所有符合条件的文件（保持原有行为）
• 确保环境变量中的目录路径是相对于项目根目录的正确路径

内容的提问来源于stack exchange，提问作者Sandex