Vue3项目使用Stylelint时:deep报未知伪类选择器错误如何解决？

修复方案 #

你配置的规则名和实际触发报错的规则不匹配，报错对应规则为selector-pseudo-class-no-unknown，你写的是针对伪元素校验的selector-pseudo-element-no-unknown，因此配置未生效，可按以下步骤修复：

• 修正stylelintrc.js中的规则配置，参考如下：

rules: {
  // 忽略:deep伪类校验
  "selector-pseudo-class-no-unknown": [true, {
    "ignorePseudoClasses": ["deep"]
  }],
  // 如果项目中使用了::deep这类伪元素写法，可补充以下配置
  "selector-pseudo-element-no-unknown": [true, {
    "ignorePseudoElements": ["deep"]
  }]
}

• 确认适配Vue的依赖已配置
  确保项目中安装了postcss-html、stylelint-config-html这类适配Vue单文件的依赖，且在stylelint配置的extends字段中引入了Vue相关预设，示例：

extends: [
  // 其他基础规则配置
  "stylelint-config-html/vue"
]

修改完成后重启Stylelint校验即可消除报错。

内容的提问来源于stack exchange，提问作者sibensir