将样式封装的 CSS 转换为 Angular 中的 RTL

Question

我们有一个相当大的项目，几乎所有的CSS都在组件中。我们需要为小部件生成 RTL 样式，并尝试使用 postcss-rtl。当我们尝试这样做时，postcss-rtl添加的[dir]属性前缀将带有_ngcontent...选择器的后缀。我们需要停止此操作，以便 CSS 按预期应用于 html。

// Current output
[dir][_ngcontent-c30] .total-deposit_value[_ngcontent-c30] {
margin-top: 5px;
}
// Expected output
[dir] .total-deposit_value[_ngcontent-c30] {
margin-top: 5px;
}

我们只是简单地将postcss-rtl导入到我们的 webpack 配置中，并在postcssImports()的底部调用它。

我不完全确定我们还能如何解决这个问题，而无需将设置ViewEncapsulation.None，这会导致 CSS 冲突。

任何帮助将不胜感激！

Answer 1

在选择器中使用/deep/

组件样式通常仅适用于组件自己的模板中的 HTML。 使用/deep/阴影穿孔后代组合器强制样式通过子组件树向下进入所有子组件视图。/deep/组合器适用于嵌套组件的任何深度，并且它适用于组件的视图子项和内容子项。

[dir] /deep/ .total-deposit_value {
margin-top: 5px;
}