vue中css作用域

问题:大家可能在写项目的时候经常看到style 标签中 scoped 属性，其实这个属性就是为该组件设置私有样式，防止污染其它组件的样式。

例如：创建一个组件foodNews，index

<template>
  <div class="container">
      <span class="title">为何房价！！！</span>
  </div> 
</template>
<style lang="scss">
   .container{
     width: 500px;
     height:500px;
      
   }
   .title{
       color:skyblue;
     }
</style>

<template>
  <div class="contain-wrap">
    <food-news></food-news>
     <span class="title">我是首页的文字，测试style的modules</span>
  </div>
</template>
<style lang="scss">
 .title{
       color:purple;
     }
</style>

这样如果不为组件的样式设置私有样式的话，那么如果有相同的类名以及标签样式就会起冲突。因此我们在style标签上添加scoped属性，也可以在stylen标签上添加 module 属性

但使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。并且如果想要修改子组件
样式的话需要使用 >>> 操作符或者/deep/ 操作符

例如：

<style scoped>
.a >>> .b { /* ... */ }
</style>

使用CSS Modules设置css的作用域：

例如：

在你的 <style> 上添加 module 属性：
<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

你也可以在 JavaScript 访问它：

<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // an identifier generated based on filename and className.
  }
}
</script>