vue 中使用/deep/深度选择器,谷歌浏览器报出警告

  • vue开发中控制台警告: **/deep/ combinator is no longer supported in CSS dynamic profile.**

应该是/deep/ 在将来会被移除

vue-loader官方文档中对于深度选择器的描述

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

  • 由于将来可能不支持/deep/深度选择,所以还是建议用>>>,而less中不支持>>>可采用以下方法

    用变量代替>>>符号

    
    
  • ~表示转义

    转义允许您将任意字符串用作属性或变量值。除插值外,里面的任何东西~"anything"~'anything'原样使用。

    .weird-element {
      content: ~"^//* some horrible but needed css hack";
    }
    

    结果是:

    .weird-element {
      content: ^//* some horrible but needed css hack;
    }
    
  • 选择器需要加大括号{}

    版本:1.4.0

    // Variables
    @my-selector: banner;
    
    // Usage
    .@{my-selector} {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }
    

    编译为:

    .banner {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }
    

你可能感兴趣的