在 Angular 中将样式封装的 CSS 转换为 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/shadow-piercing 后代组合器强制样式通过子组件树进入所有子组件视图。 /deep/ 组合器适用于任何深度的嵌套组件，并且适用于组件的视图子项和内容子项。

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