浅谈关于.vue文件中style的scoped属性
发布时间：2020-12-17 02:49:58 所属栏目：百科 来源：网络整理
导读：本文介绍了.vue文件中style的scoped属性以及踩到的坑，具体如下： scoped可以实现style只作用于当前的.vue文件 上面的文件渲染出的dom结构会是这样的 css样式是这样的 这样就现实了样式只作用于当前.vue文件。 问题：添加scoped属性后样式不起作用 原因是，c
|
本文介绍了.vue文件中style的scoped属性以及踩到的坑，具体如下： scoped可以实现style只作用于当前的.vue文件上面的文件渲染出的dom结构会是这样的 css样式是这样的 这样就现实了样式只作用于当前.vue文件。 问题：添加scoped属性后样式不起作用原因是，css被构建成 ，导致样式不能作用在dom上而失效。
原因在引用的组件上，解决的方法是将scoped属性关闭。 scoped关闭时的使用建议如果需要将scoped关闭，那么style就是作用于整个单页应用 可是我们仍然想要样式之作用于当前的.vue文件，减少对其他文件样式的影响 1、给template下的根节点加一个class，并基于这个class添加样式 <style lang='less> 2、基于第一条建议，不要有定义两个相同class名称的根节点，因为都作用于整个单页会有一个失效。 3、不要使用 span {}这种做样式设置。因为 |