vue 之 css module的使用方法

css: {
 loaderOptions: {
  css: {
  localIdentName: \'[name]__[local]-[hash: 64:5]\',
  camelCase: true
  }
 }
 }

<div>
 <p class=\"less-color\">这是通过less设置的:global字体颜色为粉色</p>
 <p :class=\"$style.lessFontSize\">这是通过less设置的:local字体大小为40px</p>
 <p :class=\"$style.red\">This should be red</p>
 <h4 :class=\"$style.headerTit\">类别推荐</h4>
 <h4 :class=\"$style[\'header-tit\']\">类别推荐</h4>
</div>

<style module lang=\"less\">
:global {
 .less-color {
 color: pink;
 }
}
:local {
 .less-font-size {
 font-size: 40px;
 }
 .red {
 color: red;
 }
 .header-tit {
 color: blue;
 }
}
</style>

<div>
 <p class=\"less-color\">这是通过less设置的:global字体颜色为粉色</p>
 <p class=\"index__less-font-size-2QPBO\">这是通过less设置的:local字体大小为40px</p>
 <p class=\"index__red-3YoIm\">This should be red</p>
 <h4 class=\"index__header-tit-3pTz4\">类别推荐</h4>
 <h4 class=\"index__header-tit-3pTz4\">类别推荐</h4>
</div>