Angular 12升级后构建出现:host-context伪类未匹配规则跳过警告如何解决

你写的:host-context语法本身没有错误，该伪类也没有被Angular官方标记为不推荐实践，这个警告是Angular 12版本的构建特性导致的：

• Angular 12默认切换为基于PostCSS的样式解析器，该解析器只能识别组件专属样式文件中的Angular特有的伪类（包括:host、:host-context、:ng-deep），如果把带:host-context的样式代码写在全局样式文件（比如项目根目录的styles.scss、公共样式库的全局样式文件等）中，PostCSS解析器无法识别该伪类，就会抛出对应警告，并且跳过对应规则的解析。

你可以根据自己的业务场景选择对应处理方式：

• 如果这段样式本身就是为组件单独设置的主题规则，排查所有全局样式文件，把误写在全局的:host-context相关代码迁移到对应组件的样式文件中即可，组件样式文件中的该写法可以被正常解析，不会抛出警告。
• 如果这段样式本身就是全局通用的主题规则，不需要绑定组件宿主上下文，直接去掉:host-context()包裹即可，把选择器直接改成.isDarkTheme .container、.isDarkTheme .bg的形式，直接匹配<body>上的类名即可实现相同效果。
• 如果你确认当前代码运行正常，也可以选择暂时忽略该警告，不会影响实际的主题切换功能运行。

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