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

Question

我们有一个相当大的项目，几乎所有的 CSS 都在组件中。我们需要为小部件生成 RTL 样式，并尝试使用postcss-rtl。当我们尝试这样做时，添加的[dir]属性前缀postcss-rtl带有选择器的后缀_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;
}