How to use the styles in vue files about nuxt-custom-elements HOT 5 CLOSED

Just so I understand correctly, there are about 40 components and all of them should have ShadowCSS?

For the Shadow Use Case I have created an example:

Component with limited style tag usage:
https://github.com/GrabarzUndPartner/nuxt-custom-elements/blob/feature/shadow-css/example/components/apps/AppShadow.vue

Two components with different import of ShadowCSS:
https://github.com/GrabarzUndPartner/nuxt-custom-elements/blob/feature/shadow-css/example/nuxt.config.js#L68

If you want to use the SingleFile Style tag, you would have to query it for a component. Unfortunately this seems to be not so easy, because the evaluation of the Vue-File is done in the vue-loader and you don't get any css back via the import. Unless you write the style imports created by the vue-loader itself.

https://github.com/GrabarzUndPartner/nuxt-custom-elements/blob/feature/shadow-css/lib/tmpl/entry.js#L11

Example: !raw-loader!vue-loader!@/components/apps/AppShadow?vue&type=style&index=0&lang=css

So you get the css from the first style tag with lang css. But what is missing here is the respective loader for compiling (e.g. PostCSS)

from nuxt-custom-elements.

Thanks for the answer, @ThornWalli. I tried your fork but from what I understood, it only takes care of including the styles of the imported Vue component, but all the styles that are being used hierarchically. Think of the following use-case:

main.vue:

<template>
  <other-component />
</template>

<script>
import otherComponent './other-component'

export default {
  components: {otherComponent}
}
</script>

other-component.vue:

<template>
  <div class="elem">test</div>
</template>

<script>
export default {
}
</script>

<style>
  .elem {
      background:red
  }
</style>

And here is the entries of module config:

[         
           {
            name: 'main',
            tags: [
              {
                name: 'main',
                path: '@/main.vue',
                options: {
                  props: ['prop1', 'prop2'],
                }
              }
            ]
          }
]

In this case, I expect the web-component to include the styles in other-component.vue but it doesn't seem to include it. I can remove all the inline styles and convert it to <style lang="css" src="./stylesforothercomponent.css"></style> but that doesn't help either.

from nuxt-custom-elements.

Am a little confused what you mean :)

Can you build me an example in a sandbox?

I have a report from an entry build here:
https://grabarzundpartner.github.io/nuxt-custom-elements/reports/webpack/nuxt-custom-elements/component-app-i18n/modern.html

There the GithubCorner is imported async, so the style is in the chunk.

If not imported async the style is in the entry.

from nuxt-custom-elements.

@ThornWalli Hello!
What about to add to the master those changes: import css from head to shadow css?

from nuxt-custom-elements.

@AlMuz Look at the version 1.8.0, there the entry has now an option (shadow) to make the contained tags to Shadow DOM elements with styling.

from nuxt-custom-elements.