vue中css的作用域

在vue的开发中，为了不让局部样式污染全局样式，引入css的作用域

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

但是我又希望在scoped中能够深度的影响样式

可以使用：>>>    或者   /deep/

<style lang="scss" scoped>
.search{
  /deep/.el-input {
    width: sizeTranslate(180rem);
  }
}
</style>

vue-loader:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

注意事项，在开发环境中我们在单个vue中改变样式，可能有时候不会影响到其他的标签，但是在服务器上会