.postcssrc.js not work in monorepo situation

Version

3.0.0-beta.15

Reproduction link

https://github.com/zhangbobell/vue-cli-lerna-reproduce

Steps to reproduce

1. git clone https://github.com/zhangbobell/vue-cli-lerna-reproduce.git
2. cd vue-cli-lerna-reproduce
3. yarn
4. cd packages/sample && yarn serve

What is expected?

runs well

What is actually happening?

broken since postcss error

Module build failed: Error: No PostCSS Config found in: /Users/myName/Sites/demos/temp/vue-cli-lerna-reproduce/node_modules/el
ement-ui/lib/theme-chalk

---

About my repos

1. I use lerna to manage monorepo include a repo create by vue-cli
2. I use a ui library element-ui, import it js and css
3. seems the imported css will be handled by postCSS, which will find it’s config file recursively in it’s parent directory until user’s home directory
4. postcss-loader has expose a options called path to specify the path of config file, but vue-cli-service only pass in sourceMap option

Tried solution

• I’ve tried use vue.config.js to override the config but failed, since it’s not allowed, main because it’s a internal config
• postcss-load-config does not provide path options, cannot use the solution posted in the docs
• following #1124 may solve this problem (the code snippet did not work since the config differs), but I did not try it, since the level of postcss config section is too deep, the callback will be a nightmare, may be encapsulate a vue-cli-plugin ?
• put a .postcssrc.js in lerna root dir or add postcss section to root package.json will solve this, but I think it’s not a elegant solution

So, would you please provide a elegant solution about this problem ?

Thanks very much !

[benlind]

@zhangbobell, how did you utilize the new vue.config.js functionality to solve your problem? Setting css.loaderOptions.postcss to {} did not get rid of the “No PostCSS Config found” error, but putting postcss: {} in the monorepo’s root package.json file did work.

[mattnathan]

This worked for me, but bear in mind that the config used in vue.config.js is more like the raw webpack config so the example mentioned by @maximelebreton isn’t correct. You need something more like

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')()
        ]
      }
    }
  }
};