vue2项目升级后深度选择器失效

Question

原来的vue2项目，支持的是node14版本；现在要把node升级为node18，以下是相关依赖，为什么深度选择器不生效，原来使用的是/deep/，升级之后替换成了::v-deep

    "vant": "^2.12.15",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "sass": "^1.26.5",
    "sass-loader": "^7.3.1",
    "css-loader": "^0.28.0",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.1.2",
    "webpack": "^3.6.0",

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

首先，关于深度选择器，Vue 2 中的深度选择器是 >>> 或者 /deep/，而在 Vue 3 中已经被替换为 ::v-deep。这是因为随着 Vue 版本迭代，scoped CSS 的特性也在不断改进，因此对应的深度选择器也有所变化。由于您的项目是基于 Vue 2 的，所以理论上应该使用 /deep/ 作为深度选择器。

关于您提到的升级后深度选择器失效的问题，可能有以下几个原因：

1. 版本不匹配问题：您提到的依赖版本中的 vue-loader 版本可能不适用于最新的 Node 版本（Node 18）。Vue Loader 和 webpack 的版本可能存在兼容性问题。尝试更新这些依赖到与 Node 18 兼容的版本。
2. 深度选择器的使用方式：确保您在使用深度选择器时遵循正确的语法和使用方式。例如，确保您的样式块是作用域样式（scoped）。例如：

<style scoped>
  .parent /deep/ .child { /* 在 Vue 2 中使用 /deep/ */ }
</style>

升级后应使用 ::v-deep 语法：

<style scoped>
  ::v-deep .child { /* 在 Vue 3 中使用 ::v-deep */ }
</style>

1. Sass 和 Sass Loader 版本问题：有时候，Sass 或 Sass Loader 的版本问题可能会导致 CSS 作用域或其他样式问题。尝试更新这些依赖到最新版本，并确保它们之间的兼容性。
2. 其他配置问题：检查 webpack 配置或其他相关配置，确保它们没有因升级而引入错误或遗漏某些配置。

为了解决这个问题，您可以尝试以下步骤：

• 更新所有依赖到最新版本，并确保它们之间的兼容性。
• 检查并更新 webpack 配置。
• 确保深度选择器的使用方式和语法正确。
• 检查是否有任何隐藏的升级后配置需要调整。

最后，建议您考虑将 Vue 项目升级到 Vue 3（如果可能的话），因为 Vue 3 有很多改进和新特性，并且 Node 18 与 Vue 3 的兼容性更好。但请注意，升级过程可能会涉及一些代码修改和重构工作。