【sass】 中使用 /deep/ 修改 elementUI 组件样式报错

在 Vue.js 中使用 /deep/ 或者 >>> 来深度应用样式时，如果遇到了修改 Element UI 组件样式而报错的情况，这可能是因为以下原因：

1. 语法错误：确保使用了正确的语法。在 Vue 2.x 中，使用 /deep/ 是正确的，但在 Vue 3.x 中，应使用 >>> 或者使用内联样式。
2. 选择器错误：确保选择器正确指向了 Element UI 组件。
3. 浏览器兼容性：部分旧版浏览器不支持 >>> 或 /deep/ 的深度选择器。

解决方法：

• 如果你使用的是 Vue 2.x，确保正确使用 /deep/：

  
  
  
  .your-element /deep/ .el-button {
    color: red;
  }

• 如果你使用的是 Vue 3.x，可以使用 >>>：

  
  
  
  .your-element >>> .el-button {
    color: red;
  }

  或者使用内联样式：

  
  
  
  <el-button :class="{'red-text': true}">Button</el-button>

  
  
  
  .red-text {
    color: red;
  }

• 如果是因为选择器问题，确保选择器准确指向 Element UI 组件：

  
  
  
  .your-element /deep/ .el-button--primary { /* 确保选择器指向按钮的主题类名 */
    color: red;
  }

• 如果是兼容性问题，考虑使用现代浏览器，或者使用 polyfill 来支持旧版浏览器。

确保你的选择器正确并且正确地使用了深度选择器语法，通常可以解决这类问题。如果问题依旧，请检查是否有其他样式覆盖了你的样式，或者是 Element UI 组件的内部结构发生了变化，导致原有的选择器不再有效。