pnpm的monorepo项目中报错找不到postss config，如何处理?

Question

项目基于pnpm搭建的monorepo
目前里面只有一个项目暂且叫他a
目录结构如下

projects
    - a
        - postcss.config.js
        ...
package.json
pnpm-workspace.yaml
...

a项目基于vue2搭建，使用postcss做移动端适配，使用组件库是vant
运行以下命令将项目跑起来

pnpm i
cd a
pnpm run serve

跑的时候报错如下：
Error: no postcss config found ...

但是我已经在a项目下放了postcss.config.js

我尝试将postcss.config.js 放到根目录，就可以正常运行，这是为什么？
我希望能放到a项目目录下，每个项目postcss配置可能不同，要如何处理？

Answer 1

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: "./", // 指定配置文件读取位置，即`packages/vue2/postcss.config.js`
        },
        // 或者直接在这里写配置
        // plugins: [
        //   require("postcss-pxtorem")({
        //     rootValue: 153,
        //     propList: ["*"],
        //     exclude: /node_modules/,
        //   })
        // ]
      },
    },
  },
};

Answer 2

我解决了这个问题，在workspace的根目录加一个文件.postcssrc.js或者postcss.config.js，代码是

const relativeCwd = '.' + process.cwd().replace(__dirname, '');
module.exports = require('fs').existsSync(relativeCwd + '/.postcssrc.js')
    ?require(relativeCwd + '/.postcssrc.js')
    :require('fs').existsSync(relativeCwd + '/postcss.config.js')
    ?require(relativeCwd + '/postcss.config.js')
    :{}

你可以尝试一下