vue中使用css modules替代scoped

最开始使用Vue的时候，是提倡并大量使用的是scoped的。

<span data-v-0467f817 class="errShow">用户名不得为空</span>

加上 scoped 属性的style会自动添加一个唯一的属性。比如data-v-0467f817为组件内 CSS 指定作用域，编译的时候 .errShow会被编译成类似 .errShow[data-v-0467f817]。

.errShow[data-v-0467f817] {
    font-size: 12px;
    color: red;
}

这种添加唯一的属性的方法可以满足日常组件局部css作用域的开发需求，但其设计上有一定缺陷，.errShow[data-v-0467f817]并不能保证是唯一的，另外在性能上也不是很好，浏览器搜索.errShow[data-v-0467f817]的速度并不如.errShow，相比于这种方式，CSS modules则做的更彻底，它不是添加属性，而是直接改变类名。

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

CSS Modules
　　CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。

用法

在style标签中添加module属性，表示打开CSS-loader的模块模式。
在模板中使用动态类绑定:class，并在类名前面加上'$style.'。
如果类名包含中划线，则使用中括号语法$style['header-tit']
也可以使用数组或对象语法。

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

<template>
  <div :class="$style.bg">
    <van-cell title="进度条" is-link to="/rx-progress-demo" />
    <van-cell title="地址选择" is-link to="/rx-address-picker-demo" />
    <van-cell title="滑动日历" is-link to="/rx-touch-calendar-demo" />
    <van-cell title="批量调取瑞信头像" is-link to="/rx-getPhoto-list-demo"/>
  </div>
</template>

<script>
export default {
  name: 'demo'
}
</script>

<style module>
.bg {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

配置
　　如果你的项目是用vue-cli搭建的，那么脚手架已经为你配置好了，直接可以使用，如果你是用webpack自己搭建的项目或想要修改默认配置，则进行下面配置。

css-loader关于CSS modules的默认配置如下：

{
  modules: true,
  importLoaders: 1,
  localIdentName: '[hash:base64]'
}

可以使用vue-loader的css Modules选项为css-loader进行自定义的配置

module: {
  rules: [
    {
      test: '\.vue$',
      loader: 'vue-loader',
      options: {
        cssModules: {
          localIdentName: '[path][name]---[local]---[hash:base64:5]',
          camelCase: true
        }
      }
    }
  ]
}

vue中使用css modules替代scoped

推荐阅读更多精彩内容