在 Angular 5 编译期间未拾取 CSS 类答案

【问题标题】：CSS classes not picked up during Angular 5 compilation在 Angular 5 编译期间未拾取 CSS 类
【发布时间】：2018-12-12 20:54:35
【问题描述】：

我在我的 Angular 5 项目中使用 ag-grid。我正在尝试将 css 类添加到单元格中。在查看了有关 ag-grid 单元格样式的大量文档后，我尝试使用 cellClass 和 cellClassRules。

样式在scss文件中定义，例如：

.readonly-cell{ background-color: #cccccc; }

然后将 scss 文件包含在组件中：

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss']
})

然后我将类应用于列：

{headerName:'Power', field:'power', width:150, cellClass:'readonly-cell'}

网格本身工作正常。问题是power 单元格不会改变颜色。当我在 Firefox 中检查呈现的 HTML 时，我可以看到单元格确实已将 readonly-cell 类应用于它们。但是规则面板上没有列出样式详细信息。

这让我觉得在编译期间没有拾取类。我认为这不是 ag-grid 的问题，而是样式类的获取方式。

有什么方法可以解决为什么类和定义没有包含在编译中？

【问题讨论】：

试试:host ::ng-deep .readonly-cell{ background-color: #cccccc; }
你在所有项目中都使用 scss 吗？也许您需要更改 angular-cli.json:"schematics": { "@schematics/angular:component": { "styleext": "scss" } }
该项目确实使用了 scss。我必须按照大卫的建议使用 deep/ng-deep，或者根据答案禁用样式封装。

标签： css angular sass ag-grid

【解决方案1】：

你得到这种行为是因为你试图通过 CSS 规则定位的元素是在你的 Angular 组件之外生成的，并且 Angular 添加了特殊属性，以便组件 CSS 仅适用于该组件（而不适用于其子组件，添加的任何 DOM 节点在 Angular 之外）。您应该使用 Angular 并在与您的样式完全相同的组件中构建您需要设置样式的所有 HTML，或者禁用该功能。您可以使用ViewEncapsulation.None 禁用它：

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss'],
  encapsulation: ViewEncapsulation.None
})

或在样式表中使用/deep/，如下所述：

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【讨论】：