vue css得模块化实现

问题：

vue单页面运用，不同得组件加载，对应得不同得css导入，会导致样式全局化，样式会混乱覆盖。

解决

1.scoped属性
原理：
给当前组件内所有元素增加一个独一无二得动态data属性，css中增加对应得一个属性选择器。

问题：使用scoped得时候 需要改变一些引入插件得样式，比如element，使用深度穿刺

2.css modules(已弃用) css.requireModuleExtension值与前者相反
原理：替每个样式都起与众不同的名字，保证不会出现重名就行（class重命名，webpack得一种解决方式）；

<template>
  <div class="hello">
    <!-- 使用 CSS Modules 声明的样式 -->
    <h1 :class="$style.color">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

// 使用 CSS Modules
<style module>
.color {
  color: #42b983;
}
</style>

这种方式用得比较少，基本没怎么用，