Vue-loader: Scoped css for dynamic element

Created on 2 Nov 2017 · 7Comments · Source: vuejs/vue-loader

Hi
I am trying to implement Vuetable2 using render functions which creates it dynamically.It has specific css requirement.
When i import css in component like
,
it does not apply to some of the parts that are being created dynamically.

I understand that making css scope adds a unique identification( that is scopeId) with css as well as static content present on the page.
I want to know how to associate this scopeId with dynamically created contents as well.
What are the ways i can achieve this.

Please let me know whether it is clear what i want to achieve or further information is required.

Thanks

Source

anit05

Most helpful comment

If it's just normal CSS you can do it like

.foo >>> .bar {style here}

Or for SCSS it can be like

.foo {
  /deep/ .bar {style here}
}

shelune on 17 Nov 2017

👍2

All 7 comments

Does this.$options._scopeId help you writing scoped attribute dynamically in render functions?
Or could you please supply a demo?
Thanks.

Jinjiang on 14 Nov 2017

If it's just normal CSS you can do it like

.foo >>> .bar {style here}

Or for SCSS it can be like

.foo {
  /deep/ .bar {style here}
}

shelune on 17 Nov 2017

👍2

@Jinjiang this.$options._scopeId has not helped.
I thought of using it earlier but has not had much success with this.

@shelune I am loading external css using CDN (i can do that locally for that matter).
So should i need to modify my CSS for SCSS ?

Thanks

anit05 on 28 Nov 2017

@anit05 not sure if I understand your question clearly?

shelune on 28 Nov 2017

Now that /deep/ has been deprecated, what's the solution?

lucas-bremond on 6 Feb 2018

👍1

Now this /deep/ has been deprecated.., What is the solution? Any Help? Thanks in advance..

karthiksubbu on 2 Mar 2018

/deep/ is deprecated in actual CSS but still valid as a pre-processor hint in vue-loader. When you use it in vue-loader it gets compiled away so it doesn't matter whether it's deprecated or not.