Vue中关于Scoped CSS 的使用

Vue中关于Scoped CSS 的使用

1. 关于scoped

在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

<style scoped> 
    .red {  color: red; } 
</style>

其原理是通过使用 PostCSS 来实现以下转换:

<template> 
    <div class="red" data-v-f3f3eg9>hi</div> 
</template>
<style> 
    .red[data-v-f3f3eg9] { 
        color: red; 
    } 
</style>

2. 混用本地和全局

<style> 
    /* 全局样式 */ 
</style>
<style scoped>  
    /* 本地样式 */ 
</style>

3. vue的深度作用选择器

要注意scoped的作用域,因为权重的问题,如果是在子组件使用了scoped,那么在父组件中是不能直接修改子组件的样式的,需要在父组件中使用vue的深度作用选择器。

深度作用选择器:使用 >>> 操作符可以使 scoped 样式中的一个选择器能够作用得“更深”,例如影响 子组件

<style scoped> 
    #app >>> a {  color: red } 
</style>

4.sass之类的预处理器如何解决“>>>”

Sass 之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/::v-deep 操作符 取而代之

<style scoped lang="scss"> 
    #app { 
        /deep/ a {   
            color: rgb(196, 50, 140) 
        } 
        ::v-deep a {   
            color: rgb(196, 50, 140) 
        }  
    } 
</style>

 

 

未经允许不得转载:小月博客 » Vue中关于Scoped CSS 的使用
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏