526互联

屏蔽 Use :deep() instead.警告

发布时间 2023-08-15 16:23:41作者: 槑孒

这个警告是由于 Vue 3 中的 Single File Component (SFC) 中的 >>> 和 /deep/ 组合选择器已被废弃，建议使用 :deep() 代替。

这是因为 >>> 和 /deep/ 在新的 CSS Shadow Parts API 标准中被弃用，而 :deep() 是 Vue 3 中的官方推荐替代方法。

如果确实想要屏蔽这个警告，可以在你的 Vue 项目中的相应配置文件中，将相关警告的输出禁用。以下是一些配置文件和方法：

  1. Vue CLI 项目：如果使用 Vue CLI 创建的项目，可以在项目的根目录中的 vue.config.js 文件中添加以下配置：

    module.exports = {
  css: {
    // 屏蔽关于深度选择器的警告
    deep: {
      warning: false
    }
  }
};

  2. Vite 项目：如果使用 Vite，可以在你的 vite.config.js 文件中添加以下配置：

    export default {
  css: {
    preprocessorOptions: {
      // 屏蔽关于深度选择器的警告
      scss: {
        additionalData: `@use "sass:meta"; @include meta.module-global();`
      }
    }
  }
};

  3. 手动在样式中使用 :deep()：最佳的方法是将你的样式代码中的 >>> 或 /deep/ 改写为 :deep()，以适应 Vue 3 的推荐方式。

需要注意的是，尽管可以屏蔽这个警告，但建议尽可能遵循 Vue 3 的最佳实践，并将样式更新为使用 :deep()，以便在未来避免问题。