如何在Vite中配置build目录下的PostCSS配置文件？

问题背景 #

为遵循最佳实践，将所有构建配置文件统一放到build/目录，原项目根目录的postcss.config.json已移至build/目录，但当前Vite配置无法正确识别该文件路径，需调整配置让Vite定位到该文件。

项目相关信息 #

目录结构 #

bin/
build/
   vite.config.js
   postcss.config.json
   ... others
src/
test/

package.json脚本 #

"scripts": {
  "dev": "vite --c build/vite.config.js",
  "build": "vite build --c build/vite.config.js",
  "preview": "vite preview --c build/vite.config.js"
}

build/postcss.config.json #

{
  "map": true,
  "plugins": {
    "autoprefixer": {}
  }
}

当前尝试的build/vite.config.js #

export default {
    root: "src",
    css: {
        postcss: {
            config: "./postcss.config.json"
        }
    },
    build: {
        outDir: "../bin",
        emptyOutDir: true,
    }
}

解决方案 #

当前配置中css.postcss.config的路径是相对于root（即src/目录）的，因此无法找到build/目录下的配置文件。可以通过以下两种方式修正：

方式一：使用Node.js路径模块（推荐） #

借助path.resolve和__dirname（当前配置文件所在目录的绝对路径）来准确定位配置文件，这种方式不受项目部署路径影响，更健壮。

修改后的build/vite.config.js：

import path from 'path';

export default {
    root: "src",
    css: {
        postcss: {
            config: path.resolve(__dirname, './postcss.config.json')
        }
    },
    build: {
        outDir: "../bin",
        emptyOutDir: true,
    }
}

方式二：使用相对项目根目录的路径 #

直接指定相对于root（src/）的上级目录路径，指向build/下的配置文件：

修改后的build/vite.config.js：

export default {
    root: "src",
    css: {
        postcss: {
            config: "../build/postcss.config.json"
        }
    },
    build: {
        outDir: "../bin",
        emptyOutDir: true,
    }
}

两种方式都能让Vite正确找到build/postcss.config.json文件，推荐使用方式一以提升配置的稳定性。

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