Angular 忽略了 less 文件上设置的样式 class

Question

出于某种原因，我的 Angular 应用没有使用我在组件的 .less 文件中定义的样式。它只是忽略它。

由于我是 CSS 的新手，我没有任何调试方法。

我的布局由许多由其他 less 文件导入的已定义样式组成。我正在尝试修改 mapboxgl 的样式。

当前地图是这样的：

它是在 HTML 上定义的：

<div eds-tile class="column xl-3">
    <eds-tile-title>Location</eds-tile-title>
    <eds-tile-actions>
        <div class="action">
            <eds-icon icon="maximize">
            </eds-icon>
        </div>
    </eds-tile-actions>
    <div class="map" id="map"></div>
</div>

关于这个组件我有：

@import "~@eds/vanilla/variables/light";
@import (reference) "~@eds/vanilla/font/styles";
@import (reference, multiple) "~@eds/vanilla/variables/global";
@import "./map/map";

而在 ./map/map.less 我有很多主题风格化： https://pastebin.com/b8CpakH9

我的麻烦是有一些类确实被 Angular 使用了，比如这个：

.map {
  min-height: 200px;
  width: 100%;
  height: 100%;

  a {
    color: @text;
  }
}

但其他人则不是，像这样（您可以在下图中看到浏览器样式检查中的该定义没有任何相关内容）：

.mapboxgl-ctrl-bottom-left {
  display: none !important;
}

我的情况如何？

我正在关注另一个运行良好的示例。在 component.less 文件中它使用：

@import (reference) "~@eds/vanilla/font/styles";

.dark {
  @import "~@eds/vanilla/variables/dark";
  @import (multiple) "./map/map";
}
.light {
  @import "~@eds/vanilla/variables/light";
  @import (multiple) "./map/map";
}

与 map.less 文件相同，除了最小高度值。

范例：

你可以清楚地看到在这个例子中它使用“.light .map {}”来设置样式。与我的情况不同，由于某种原因转换为“.map[_ng-content-c5] {}”。我不知道这是什么意思。

抱歉，问题描述含糊不清。只是因为我没有足够的经验来命名它。

Answer 1

我想我知道问题出在哪里了。

如果您打开生成的 css 文件，您会看到没有 .mapboxgl-ctrl-bottom-left {

您会看到如下内容：.mapboxgl-ctrl-bottom-left[_ngcontent...] {

这就是 angular 的工作原理，它添加了一些属性以确保一种样式仅适用于一个组件。

你可以通过ViewEncapsulation

控制样式是否封装

最有可能发生这种情况是因为内容（在本例中为地图）在 DOM 加载后使用 JS 呈现，并且不由 angular 本身处理，因此它不会获取属性。没有更多信息，我无法进一步帮助您，因为我不知道所有细节。我不知道你用的是哪张地图，也许有一个关于如何以某种方式将它与 angular 集成的教程。

Angular 忽略了 less 文件上设置的样式 class

Angular is ignoring the style class set on less files

html

css

less

angular