CSS中的scoped和module的区别

scoped

scoped的效果是对元素加上data属性，但是可能会受到全局样式的影响。

<div class="title">图书管理系统</div>

使用scope后会被加上data属性如下所示：

<div class="title" data-v-161f490f="">图书管理系统</div>

module

module经过css-loader会对类名进行编译，添加上hash值等，所以无需担心和其他页面的同样的类名冲突，也可以避免全局样式被污染。

<div class="tag">匹配结果</div>

使用module后会被对类名进行编译，效果如下所示：

.index_container_Vpwga {
    color:red;
}

如果该页面使用了动态绑定样式和module，在里面写的样式不生效，可以在动态绑定的容器里使用** ：global**，将该页面需要修改的样式写在：global里，便可以生效，并且不会对此页面以外的样式产生冲突。部分展示如下：

<template>
  <div :class="styles.container">
    <span class="title">色系</span>
  </div>
</template>
<style lang="less" module>
  .container {
     padding: 12px;
     
     :global {
       .title {
        padding: 5px;
        margin: 4px;
       }
     }
  }
</style>