标签：作用 guid 详细 lan gui 字符串 temp pre stc
当 <style> 标签有 scoped 属性时，相当于在元素中添加了一个唯一属性用来区分。
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
它通过使用 PostCSS 来实现以下转换，转换结果：
<style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template>
通过给样式名加hash字符串后缀的方式，实现特定作用域语境中的样式编译后的样式在全局唯一。
<template> <p :class="$style.gray"> Im gray </p> </template> <style module> .gray { color: gray; } </style>
使用module的结果编译如下：
<p class="gray_3FI3s6uz">Im gray</p> .gray_3FI3s6uz { color: gray; }
由此可见，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。
推荐使用CSS Modules
详细见官方文档：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局样式
[Vue]Scoped Css与Css Modules的区别
标签：作用 guid 详细 lan gui 字符串 temp pre stc
原文地址：https://www.cnblogs.com/vickylinj/p/9573395.html
