[Vue]Scoped Css与Css Modules的区别

均为解决CSS全局作用域问题（样式冲突（污染））的一个解决方案。

1.Scoped CSS

当 <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>

2.CSS Modules

通过给样式名加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#混用本地和全局样式

转载于:https://www.cnblogs.com/vickylinj/p/9573395.html

[Vue]Scoped Css与Css Modules的区别相关推荐

[译] Vue: scoped 样式与 CSS Module 对比
原文:Vue.js - Scoped Styles vs CSS Modules 作者:Michał Sajnóg 发表时间:Aug 28, 2018 译者:西楼听雨发表时间: 2018/9/10 ...
vue scoped 原理解析
Vue scoped,原理,涉及到 vue-loader 的处理策略: 一.首先呢,是 VueLoaderPlugin 策略: VueLoaderPlugin 先获取了 webpack 原来的 rul ...
常见的前端考试面试题目【vue，react，css，six】
常见的vue,javascript,css前端面试题 1.Vue2和Vue3的区别至少说5点 2.Vue3中组件通信的流程[父传子,子传父] 3.Apply/call/bind的原理是什么? 4.说说 ...
vue中使用hover.css动画
vue中使用hover.css动画介绍:一组 CSS3 驱动的悬停效果,可应用于链接.按钮.徽标.SVG.特色图像等.轻松应用于您自己的元素.修改或仅用于灵感.在 CSS.Sass 和 LESS 中 ...
js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
CSS: HTML 和 Body 的区别
在 CSS 中,<html> 和 <body> 的区别往往被忽略,全局样式或者定义在 <html> 上,或者定义在 <body> 上.实际上,两者是有区 ...
Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
vue.js之过渡效果-css
2019独角兽企业重金招聘Python工程师标准>>> vue.js之过渡效果-css 概述 vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡.官方文档这样描述过渡效果 ...

[Vue]Scoped Css与Css Modules的区别

均为解决CSS全局作用域问题（样式冲突（污染））的一个解决方案。

1.Scoped CSS

2.CSS Modules

[Vue]Scoped Css与Css Modules的区别相关推荐

最新文章

热门文章