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

[MartinPeverelli]

Version

3.0.0-beta.15

Reproduction link

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

Steps to reproduce

• git clone git@github.com: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.

[yyx990803]

Why are you setting VUE_CLI_CSS_SHADOW_MODE = true? That is only used in web component mode and that is what breaks your styling. This value is also set automatically when targeting web components so there's no reason you should ever need to use it yourself.

[MartinPeverelli]

Hi @yyx990803 ,
The idea behind setting VUE_CLI_CSS_SHADOW_MODE manually, is because I don't want in my App (reproduction-app) to have to import the css.

If I use vue-cli-service build --target lib src/main.js, then the process extracts the css to a .css file, and the demo.html file explains that I should import it manually.

My intention was to have a single import point, with the css injected on the component.

I tried the approach with WC, but when importing the module exactly as with this reproduction, the parent reproduction-app fails to build/serve because of a "undefined Vue".

So... is there a way to build a component library, and be able to use that component with a single import statement having it embed its css?

[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

[MartinPeverelli]

@stefanalexlupu I'm sorry but I have zero experience with nuxt, let alone ssr. 😢

[gen2tech]

Hi @yyx990803 , The idea behind setting VUE_CLI_CSS_SHADOW_MODE manually, is because I don't want in my App (reproduction-app) to have to import the css.

If I use vue-cli-service build --target lib src/main.js, then the process extracts the css to a .css file, and the demo.html file explains that I should import it manually.

My intention was to have a single import point, with the css injected on the component.

I tried the approach with WC, but when importing the module exactly as with this reproduction, the parent reproduction-app fails to build/serve because of a "undefined Vue".

So... is there a way to build a component library, and be able to use that component with a single import statement having it embed its css?

remove VUE_CLI_CSS_SHADOW_MODE and put the code below in your vue.config.js

module.exports = defineConfig({
  css: {
    extract: false,
  },
}

It should solve your problem