解决vue scoped scss 无效的问题


Posted in Javascript onSeptember 04, 2020

今天遇到scoped内部的scss设置无效,解决办法如下:

/deep/

<style scoped lang="scss">
.position-el-steps {
 /deep/ .el-step.is-vertical {
 .el-step__description {
  margin-top: -20px;
 }
 
 .el-step__line {
  border-left: 2px dashed #c0c4cc;
  background-color: transparent;
  visibility: visible !important;
 }
 }
}

补充知识:【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告

前言

在做vue项目的时候,很多人应该已经碰到在vue 组件中,style 局部修改样式更改不了

<!-- 这个是 B 组件 -->
<template>
 <div>
 <h1 class="my">我是B组件</h1>
 </div>
</template>
<!-- A组件 -->
<template>
 <div class="boxA">
 <A/>
 </div>
</template>
<script>
 import A from './a'
 export default {
 name: 'index',
 components:{
 A
 }
 }
</script>
<style scoped>
 /* 使用 scoped 更改的组件样式。 */
 /*
 此处只是举个栗子使用,没有经过验证。很多人会下面这摸写,但是发现改变不了B组件的样式,其实是 scoped 局部的,所以不能。
 .boxA .my {
 color:red;
 }
 */
 .boxA /deep/ .my {
 color:red;
 }
</style>

修改 vue 插件或者 框架内组件使用

语法: .自己定义的类名 /deep/ .组件内的类名 { /* 代码块 */ }

看下图:

解决vue scoped scss 无效的问题

修改组件样式三种方式

以下例子以 vux 来弄。 /deep/ 和 >>> 在vue中会自动生成选择器的选择属性,你在页面中,会看到控制台中的会有 [data-v-xxxxxx] 的。

注意:在谷歌中,也有这个 /deep/ 中间选择器,但是谷歌放弃这个,如果在你控制台出现下面的图片的警告,证明你写错了,多写了 /deep/ https://www.chromestatus.com/features/4964279606312960

vue /deep/ 警告

解决vue scoped scss 无效的问题

解决方案:只要在页面中去查找下即可,利用vue渲染后会把所有的,会在控制台能看到

解决vue scoped scss 无效的问题

第一种:使用 /deep/

推荐的。看下面例子。注意:使用 cass 和 less 只能使用 /deep/ 这个方法

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="步骤一" description="step 1"></step-item>
  <step-item title="步骤二" description="step 2"></step-item>
  <step-item title="步骤三" description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
 修改样式
 通过使用 box-out 的class类,找到下面组件内的class类,中间必须得使用 /deep/ 才能找到下面的class类。
 */
 .box-out /deep/ .xxxxx组件样式类 {
 color: red;
 }
</style>

方法二:使用 >>>

使用这三个大于号就可以找到,跟上面的 /deep/ 差不多。

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="步骤一" description="step 1"></step-item>
  <step-item title="步骤二" description="step 2"></step-item>
  <step-item title="步骤三" description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
 修改样式
 通过使用 box-out 的class类,找到下面组件内的class类,中间必须得使用 >>> 才能找到下面的class类。
 */
 .box-out >>> .xxxxx组件样式类 {
 color: red;
 }
</style>

方法三:使用全局样式表(不推荐)

前面两种方式是都是局部的(推荐),也是可以通过全局样式表改,当然记得在外面添加命名空间(不懂css 的命名空间的话,自行百度)。这个推不推荐的得看个人。希望能够根据业务需求进行增加修改。

<!-- 情况下,引入全局得样式,或者是直接在 app.vue 文件中写全局得。下面是在全局得app.vue中写 -->
<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}

</script>

<style>
/* 上面没加 scoped 属性,所以全局样式 */ 
.box-out .xxxxx组件样式类 {
 color: red;
 }
</style>

另外说点其他技巧

如果在浏览器中,看到当前的 vue组件属性 [data-v-xxxxxx] 的话,那么可以直接拿过来使用,碧如下面:

解决vue scoped scss 无效的问题

以上这篇解决vue scoped scss 无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Django获取应用下的所有models的例子
2019/08/30 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
python操作cfg配置文件方式
2019/12/22 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python如何求圆的面积
2020/07/01 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
外贸业务员工作职责
2014/01/06 职场文书
上课说话检讨书大全
2014/01/22 职场文书
委托公证书范本
2014/04/03 职场文书
环保标语大全
2014/06/12 职场文书
一份文言文检讨书
2014/09/13 职场文书
婚内房产协议书范本
2014/10/02 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
二手车转让协议书
2015/01/29 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书