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

由于某些原因，我的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>

在./map/map.less上，我有很多主题风格：

我的问题是有些类确实被Angular使用，比如：

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

  a {
    color: @text;
  }
}

但其他人并非如此（您可以在下图中看到，在浏览器的样式检查中，该定义与此无关）：

我的案子怎么了

我遵循另一个例子，它工作良好。在其使用的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]{}”。我不知道这意味着什么

---

抱歉，对问题的描述太模糊了。这仅仅是因为我没有足够的经验来命名它。

我想我知道问题是什么

如果打开生成的css文件，您会看到没有

.mapboxgl ctrl左下角{

您将看到如下内容：

.mapboxgl ctrl左下[\u ngcontent…]{

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

您可以控制是否使用封装样式

最有可能发生这种情况的原因是，内容（在本例中是贴图）在加载DOM后使用JS进行渲染，而不是由angular本身处理，因此它不会获取属性。

---

如果没有更多的信息，我无法进一步帮助您，因为我不知道所有的细节。我不知道您使用的是哪种地图，可能有一个关于如何将其与angular集成的教程。

我可能误解了，但您正试图做的到底是什么？您是否在angular.jsonit中引用了您的样式文件“样式”：[“src/filename.less”]@indrajeet不，这不是问题。由于主题被显示，它确实在使用样式，但有一些特殊的东西没有显示出来。@OnlineUser02094在这种特殊情况下，我只是试图在“mapbox”链接的div上设置display:none，以使其消失，并且不起作用。虽然我只是显示了这个场景，但这是一个问题其他几种情况下也会发生这种行为。请参阅我的编辑。这与此非常相关。您知道为什么在该示例中它不使用“ngcontent”（它也使用Angular）？在@Component上使用“封装：视图封装。无”解决了我的问题。谢谢。

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

@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";
}