Vue 使用Scss预处理Css，在使用深度作用选择器修改局部ui默认样式时，/deep/报错不生效

深度作用选择器有>>>和别名/deep/>>>基本在纯css中使用，类似Sass，less的Css预编译器一般都用/deep/。出现的问题最近在写项目的时候（使用eslint-standard代码校验），我用Sass使用/deep/修改局部默认ui样式的时候，发现终端报错，并指明是/deep/这块的错误。报错如下无奈我只好另起一个style去写纯Css...

易云慕

11280人浏览 · 2019-11-13 19:15:38

易云慕 · 2019-11-13 19:15:38 发布

深度作用选择器有>>>和别名/deep/
>>>基本在纯css中使用，类似Sass，less的Css预编译器一般都用/deep/。

出现的问题

最近在写项目的时候（使用eslint-standard代码校验），我用Sass(dart-Sass)使用/deep/修改局部默认ui样式的时候，发现终端报错，并指明是/deep/这块的错误。报错如下
在这里插入图片描述
无奈我只好另起一个style去写纯Css去修改默认ui样式。
之后经过一番查找，了解到现在可以使用::v-deep去代替/deep/

::v-deep .van-notice-bar__wrap {
  height: 30px;
  padding-left: 20px;
}

如此，成功修改默认ui样式，类名前缀成功添加！
在这里插入图片描述
折腾老半天了，小白的痛苦T T
记录一下

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^