合肥网站排名,临河网站建设,天津 网站设计公司,滨江区网站开发公司均为解决CSS全局作用域问题#xff08;样式冲突#xff08;污染#xff09;#xff09;的一个解决方案。 1.Scoped CSS 当 style 标签有 scoped 属性时#xff0c;相当于在元素中添加了一个唯一属性用来区分。 style scoped
.example {color: red;
}
…均为解决CSS全局作用域问题样式冲突污染的一个解决方案。 1.Scoped CSS 当 style 标签有 scoped 属性时相当于在元素中添加了一个唯一属性用来区分。 style scoped
.example {color: red;
}
/styletemplatediv classexamplehi/div
/template 它通过使用 PostCSS 来实现以下转换转换结果 style
.example[data-v-f3f3eg9] {color: red;
}
/styletemplatediv classexample data-v-f3f3eg9hi/div
/template 2.CSS Modules 通过给样式名加hash字符串后缀的方式实现特定作用域语境中的样式编译后的样式在全局唯一。 templatep :class$style.grayIm gray/p
/template
style module
.gray {color: gray;
}
/style 使用module的结果编译如下 p classgray_3FI3s6uzIm gray/p
.gray_3FI3s6uz {color: gray;
} 由此可见css module直接替换了类名排除了用户设置类名影响组件样式的可能性。 推荐使用CSS Modules 详细见官方文档https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局样式转载于:https://www.cnblogs.com/vickylinj/p/9573395.html
