vue项目中使用jquery（vue3中使用scss加上scoped导致样式失效问题）

使用scss加上scoped导致样式失效

在vue3 中给style标签加上scoped 的时候自定义第三方ui框架样式不生效的解决方案

给样式加上 /deep/ >>> 或 ::v-deep

注意事项

在vue3 + vite 中使用 :: v-deep 抛出警告

:v-deep usage as a combinator has been deprecated. Use :deep() instead.

解决办法 使用 :deep()

深度选择器 Depth selector

vue中加样式失效,scoped穿透你需要了解一下

1.什么是scoped

在Vue文件中的style标签上有一个特殊的属性             ，scoped
  
  
  
  
  
  
  。

当一个style标签拥有scoped属性时候  
 
  
 
  
 
  
 
  
 
  
 
  
 ，它的css样式只能用于当前的Vue组件













，可以使组件的样式不相互污染 
  
  
  
  
  
  
。

如果一个项目的所有style标签都加上了scoped属性
  
  
  
  
  
  
 ，相当于实现了样式的模块化 


 


 


 


 


 


 

。

2.scoped穿透

scss的样式穿透,在样式的选择器前加上 /deep/

3.另一种方式实现穿透的效果

直接另写一个<style></style>标签就行了啊,千万不要再加scoped了哈.

以上为个人经验  
  
  
  
  
  
  ，希望能给大家一个参考
 


 


 


 


 


 


 

，也希望大家多多支持本站
 
 
 
 
 
 
 。