Component built with --target lib does not persist styles when imported

Version

3.0.0-beta.15

Reproduction link

https://github.com/MartinPeverelli/reproduction-app

Steps to reproduce

• git clone [e-mail]:MartinPeverelli/reproduction-app.git
• npm run install
• npm run serve

What is expected?

Title on screen should be red, because imported component ReproductionModuleTranspiled has scoped styles defining its text to be red.

What is actually happening?

Title on screen is black, styles are not being applied from imported module

---

Component ReproductionModuleTranspiled is here: https://github.com/MartinPeverelli/reproduction-module-transpiled Was built using vue-cli-service build --target lib src/main.js and has .env.production with VUE_CLI_CSS_SHADOW_MODE = true The generated dist files do indeed contain the scoped css, but it is not being applied when the component is imported on the main app.

[MartinPeverelli]

@yyx990803 just found this in the docs (which I see are under heavy update)

dist/myLib.css: Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)

That appears to produce the desired effect. Thanks!

[stefanalexlupu]

Hey, your solution worked for me but when using it with nuxt ssr, I get the following error:

document is not defined

And this snippet of code is supposedly the reason:

  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.

in the common.js file