Angular 7项目Sonarqube扫描忽略::ng-deep规则方法咨询

我之前在Angular项目里也碰到过这个问题，//NOSONAR确实对样式文件的规则不生效——这个注释主要是给JS/TS/Java这类代码逻辑类文件用的，对CSS/SCSS的规则检查不适用。下面给你几个可行的解决办法：

一、单独忽略某一处的报错 #

如果你只想跳过某一行::ng-deep的检查，用Sonar专门针对样式文件的注释就行，要写对对应的规则ID：

/* sonar-disable-next-line css:unknown-pseudo-selector */
::ng-deep .your-target-class {
  padding: 10px;
  // 你的样式代码
}

要是不确定规则ID，直接去Sonar报告里点这条报错的详情，就能看到准确的规则标识，替换进去就好。

二、全局禁用这条规则（适合大量使用::ng-deep的场景） #

如果项目里::ng-deep用得比较多，不想逐个加注释，可以在SonarQube后台全局关闭这条规则：

• 登录SonarQube，进入你的项目页面
• 点击顶部的「质量配置」，然后选择「管理规则」
• 搜索「Unknown pseudo-element selector」（或者直接搜规则ID）
• 找到这条规则后，把它从当前使用的质量配置里移除，或者设置为「关闭」状态

三、用Angular官方推荐的方式替代::ng-deep（长期最优解） #

其实Angular官方已经不推荐使用::ng-deep了，它属于非标准的样式穿透方式，后续可能会被废弃。你可以试试这些替代方案：

• 关闭组件的视图封装：在组件元数据里添加encapsulation: ViewEncapsulation.None，这样组件样式会全局生效，但记得给类名加独特前缀避免样式冲突
• 使用CSS变量：在全局样式里定义变量，组件里直接引用，不需要穿透就能覆盖子组件样式
• 通过@Input传递样式类：父组件给子组件传样式类名，子组件把类名应用到目标元素上

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