Thanks to visit codestin.com
Credit goes to github.com

Skip to content

2.0.8 vue-template-compiler breaks scoped css #4266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
tonypee opened this issue Nov 21, 2016 · 5 comments · Fixed by #4274
Closed

2.0.8 vue-template-compiler breaks scoped css #4266

tonypee opened this issue Nov 21, 2016 · 5 comments · Fixed by #4274
Assignees
@ktsn
Labels
bug

Comments

@tonypee
Copy link

tonypee commented Nov 21, 2016

When using vue-class-component library with vue-router in 2.0.8, dom elements are not being id'd and therefore the 'scoped' css is broken.

To replicate, simply install VueRouter in a test project that exports using the js like:

// hello.vue
...
<script>
import Component from 'vue-class-component'

@Component export default class Login {
  name = 'hello'
  msg = 'Welcome to Your Vue.js App'
}
</script>
...

// app.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

"vue": "^2.0.8",
"vue-class-component": "^4.3.1",
"vue-router": "^2.0.3"

I also find it impossible to roll back vue (i want to roll back to 2.0.7) because the vue-loader library which is a dependancy of vue has a subdependancy of vue-template-compiler@^2.0.5 which will then just install the latest, and throw a version mismatch error. It would be nice to be able to lock to an older version
@LinusBorg
Copy link
Member

LinusBorg commented Nov 21, 2016 •
edited
Loading

If this only happens with vue-class-component, please open an issue in that repo.

Also, please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If nessessary, create a repository for us to clone, with a minimal reproduction. repositories of actual projects will generally not be accepted .

Thank you.

@tonypee
Copy link
Author

tonypee commented Nov 21, 2016 •
edited
Loading

the issue is with view-template-compiler tho, so i moved the bug here, it is also 'caused' by vue-router being present too. Obv. i can move it if you want tho

@tonypee
Copy link
Author

tonypee commented Nov 21, 2016 •
edited
Loading

Here is an example repo

https://github.com/tonypee/vue-issue-4266

@yyx990803
Copy link
Member

yyx990803 commented Nov 21, 2016 •
edited
Loading

Haven't looked into the details but I suspect it may have to do with vue-class-component not handling _scopeId properly. I don't see anything between 2.0.7 and 2.0.8 that could cause this problem. /cc @ktsn

@ktsn
Copy link
Member

ktsn commented Nov 22, 2016

I'll look into it.

@ktsn ktsn self-assigned this Nov 22, 2016
ktsn added a commit to ktsn/vue that referenced this issue Nov 22, 2016
@ktsn
global mixin should not drop scope id (fix vuejs#4266)
b9f8ad6
@ktsn ktsn mentioned this issue Nov 22, 2016
Merged
yyx990803 pushed a commit that referenced this issue Nov 22, 2016
@ktsn @yyx990803
global mixin should not drop scope id (fix #4266) (#4274)
c57ba3e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ktsn ktsn

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Avoid to drop scope id by applying global mixin ktsn/vue
4 participants
@yyx990803 @LinusBorg @ktsn @tonypee