深度选择器＞＞＞ /deep/ ::v-deep亲测好用

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  div>
template>
 
<style lang="css" scoped>
/* 方案一 */
/deep/.hello{
  background-color: yellow;
}
 
/* 方案二 
    第三方组件类名 >>> 不能写子组件的根元素标签/类名（可选：根元素内部元素标签名、类名） {
      样式
      } */
/* 
.hi >>>{
  background-color:yellow;
} 
.hi >>> span{
  color: green;
}
.hi >>> .nihao{
  /* background-color:yellow; */
  color: green;
}
*/
style>

<template>
  <div class="hello">
    <span class="nihao">你好啊span>
  div>
template>
 
<style scoped>
.hello{
  width: 50px;
  height: 50px;
  background-color: red;
}
style>

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  div>
template>
 
<style lang="less" scoped>
/* 方案一 */
// /deep/.hi {
//   background-color:yellow;
//   span{
//     color: green;
//   }
// }
 
/* 方案二 */
.hi::v-deep{
  background-color: yellow;
  span{
    color: green;
  }
}
style>

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  div>
template>
 
<style lang="scss" scoped>
/* 方案一 */
.hi::v-deep{
  background-color: yellow;
  span{
    color: green;
  }
}
 
/* 方案二 :不能用*/
// /deep/.hi {
//   background-color:yellow;
//   span{
//     color: green;
//   }
// }
style>

vue和less、sass版本对应关系

  "dependencies": {

    "sass": "^1.54.5",

  "sass-loader": "^7.1.0",

    "vue": "^2.6.11",

    "less": "^4.1.3",

    "less": "^4.1.3",

  "less-loader": "^7.3.0",

  },

sass 安装

cnpm install sass

cnpm install sass-loader@7.1.0

less安装

cnpm install less@4.1.3

cnpm install less-loader@7.3.0

参考链接：深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞_俺是老王的博客-CSDN博客_v-deep