简单，却又看了又忘——备忘录

作为鱼的记忆本人，仅以本文记录总是看了又忘的基础知识。

1、module、scoped 区别

scoped：编译后会在该vue组件元素上加上hash标识属性，在vue组件里的每个元素都有同一个hash标识属性。无法完全避开css权重和类名重复的问题。

module：为所有的类重新生成了一个独一无二的名字，有效避免css 名称冲突的问题。

区别：

• 采用 scoped，如果子类中的class在父类中存在，是可能会被影响的。但 module 因为生成了唯一名称，所以不会有影响。
• scoped 样式中，可以使用 >>> 连接符（或者 /deep/ ）修改子组件样式。module 则可以使用 :global来重写，且可以使用 $style获取 class传给子组件，便于复用。
• scoped会使标签选择器渲染变慢很多倍，而使用class或id则不会

css module global

## 父级重写三方组件的样式
.fatherClass{
 :global{
  .third-party-class{
   // 这里改第三方类的样式
   font-weitht: 500;
  }
 }
}

## 同级重写三方组件的样式
.fatherClass{
 &:global{
  .third-party-class{
   // 这里改第三方类的样式
   font-weitht: 500;
  }
 }
}
## or
.fatherClass:global{
  .third-party-class{
   // 这里改第三方类的样式
   font-weitht: 500;
  }
 }