为什么我用 style scoped 后 在Chrome 浏览器样式无效?

FlexUI
  • 120

在我印象里 Chrome 是完全支持 <style scoped>的呀,加上 scoped 后 每个div都会带上自定义属性 data-v-XXX,但是现在这个 vuecli项目里居然不行,没有这个 data-v-XXX出来。

Chrome

image.png

但是呢 火狐浏览器他又支持:

Firefox

image.png

要说 Chrome 本来就不支持,那么我发现其他线上 打包好的 项目 它又支持这种模式,一样是 Chrome 浏览器

Chrome

image.png


<script>
export default {
   data(){
      return{
         UserAvatar:require("@/assets/icon/UserAvatar.png")
      }
   }

}
</script>

<style scoped>
 
   .userStatusBg {
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
   }
</style>
回复
阅读 430
2 个回答

我知道原因了<style scoped>不行,要<style scoped="scoped">才可以,已经解决了。

首先要明白,style scoped与浏览器支持无关,这并不是浏览器本身提供的功能,data-v-XXX 是vue-loader 编译之后的结果。另外看Firefox 的显示也很奇怪。查看是否报错。检查一下配置吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏