Angular忽略了在较少文件上设置的样式类

Question

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

由于我是CSS的新手，因此无法对其进行调试。

我的布局由许多其他较少文件导入的已定义样式组成。我正在尝试修改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本身进行处理，因此无法获取属性。 没有更多的信息，因为我不知道所有的细节，我无法再为您提供帮助。我不知道您使用的是哪个地图，也许有一个教程以某种方式将其与角度集成。