VUE CSS module

VUE CSS module

CSS Modules 是一个流行的，用于模块和组合CSS的系统。vue-loader提供了与CSS Modules的一流集成，可以作为模拟scoped CSS 的替代方案.

添加modeul

<style module lang="less">
.red {
  color:#F00;
}
.size {
  font-size: 18px;
}
</style>

模板中通过$style.xxx 方位

<a :class="$style.red">这是一个a标签</a>
<a :class="{[$style.red]: isRed}">这是一个a标签</a>
<a :class="[$style.red, $style.size]">这是一个a标签</a>

js中访问

export default {
  created() {
    // 'red_1WQKDA-AD'
    // 一个基于文件名和类名生成的标识符
    console.log(this.$style.red);
  }
}