在vue-cli项目中，我们在二次覆盖样式的时候会遇到这个问题，就是在控制样式的时候，复制了类名，但是设置了样式会没有。

解决方式：在样式前面加一个 /deep/

<style lang="less" scoped>
.Home-container {padding: 46px 0 50px 0;.van-nav-bar {background-color: #007bff;color: white;}// 需要加 /deep/ 才能控制到它/deep/ .van-nav-bar__title{color: white;}
}
</style>

具体可以总结如下图：

/deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。

如果想让某些样 式对子组件生效，可以使用 /deep/ 深度选择器。

注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。

vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法相关推荐

Vue项目中报错error Indentifier ‘attr_id‘ is not in camel case解决方法如下
首先,来看一下报错代码实例出现上述原因主要是eslint规则中不允许在属性名称下面使用"_",再或者就是对解构标识符强制执行驼峰式风格规范导致的,主要原因: 解决方案一:去掉 a ...
vue项目如何在data里调用methods中的方法
vue项目如何在data里调用methods中的方法比如使用swiper组件在data里调用methods中函数的方式:data在vue项目里实际也是个函数,所以只要如下操作就行: data() { ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
Vue项目跨域解决方案与 vue.config.js 配置解析
为什么会出现跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说 ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
关于van-card中thumb引入本地图片而无法正常显示的解决方法
关于van-card中thumb引入本地图片而无法正常显示的解决方法前言解决办法总结前言最近在弄一个微信公众号,是H5前端,用到的是vant组件. 当然Vant的官方文档以及例子都有,但是很 ...
eclipse中出现Context startup failed due to previous errors错误解决方法
eclipse中出现Context startup failed due to previous errors错误解决方法今天使用svn更新了工程之后,发现eclipse工程的.classpath文 ...
java发布后功能不能用,急项目发布后java写的打印功能失效了-求解解决方法
当前位置:我的异常网» J2EE » 急项目发布后java写的打印功能失效了-求解解决方法急项目发布后java写的打印功能失效了-求解解决方法 www.myexceptions.net 网友分享于 ...

vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法

/deep/ 样式穿透

vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法相关推荐

最新文章

热门文章