webpack编译额外生成focus-visible类选择器，如何禁用postcss-loader该功能？

这个额外生成类选择器的功能来自PostCSS的postcss-focus-visible插件，是默认开启的浏览器兼容降级方案，你可以通过以下配置禁用：

配置修改方法 #

• 如果你项目使用了postcss-preset-env预设（绝大多数项目的默认配置都会引入该预设），直接在postcss配置文件（通常为postcss.config.js）或webpack配置中的postcss-loader配置项内添加如下规则：

module.exports = {
  plugins: [
    ['postcss-preset-env', {
      features: {
        // 关闭:focus-visible伪类自动转类名的兼容逻辑
        'focus-visible-pseudo-class': false
      }
    }]
  ]
}

• 如果你是单独引入了postcss-focus-visible插件，直接从postcss配置的plugins数组中移除该插件即可。

如果不想全局禁用，只想跳过单条样式的转换，可以在对应样式前添加注释：

/* postcss-disable-next-line focus-visible-pseudo-class */
.element:focus-visible {
  background-color: pink;
}

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