Vue-cli: .postcssrc.js not work in monorepo situation

[zhangbobell]

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 !

[yyx990803]

We will make postcss-loader's option configurable in vue.config.js.

[jkzing]

I have met same issue before with a monorepo project. Actually It's because yarn workspace is using different mechanism to resolve dependencies rather than lerna + npm. Yarn will hoist all your dependencies to your project root.

If you try to use lerna with npm client in your provided repo, you will find it works fine.

Good news is, yarn workspace support a nohoist mode since v1.4.2 ( see https://yarnpkg.com/blog/2018/02/15/nohoist/ for more details), you just need to change your package.json to:

{
  "private": true,
  "devDependencies": {
    "lerna": "^2.11.0"
  },
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": ["**/element-ui"]
  }
}

[zhangbobell]

@yyx990803 @jkzing thank you both, I'll try nohoist option in root package.json temporarily to solve this problem, and look forward the next release! 😄

[yyx990803]

closed via 0ba111e

[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.

[maximelebreton]

Same as @benlind, trying to set this code in vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: {
          autoprefixer: {}
        }
      }
    }
  }
}

but doesn't work.

Thanks @benlind for the temporary solution in the root package.json :)

[georgyfarniev]

closed via 0ba111e

@yyx990803, this solution doesn't work for me, only placing postcss: {} in root's package.json file. I think this issue should be reopened.

[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')()
        ]
      }
    }
  }
};

[maximelebreton]

@mattnathan I said that my example did not work ;)

[mattnathan]

@mattnathan I said that my example did not work ;)

Ha, of course. I was hoping to help out by changing the example into one that did work (for me at least) in case some future person stumbled across this issue/thread and didn't have the time to work out the correct way to do it... mostly because I expect that person will be me in a few months time!

[adi518]

I just ran into this as well. I use Workspaces, so eventually I figured out PostCSS is looking for a config file at the root workspace, where node_modules actually lives. So pretty simple fix, just create a postcss.config.js file that exports an empty object, like so:

// https://github.com/vuejs/vue-cli/issues/1462
// https://github.com/postcss/postcss/issues/1190
// https://github.com/postcss/postcss/issues/1205

module.exports = {}

I usually add links to related issues, to reason why this file is necessary. I should also mention I didn't have to go through this for a React based project that uses a similar CSS import (that raised this error), so I'm guessing it's something with how PostCSS is integrated into vue-cli-service.