角6-如何在组件级应用外部css样式表(传单)？

Question

试着在六角形组件中使用传单。取决于css文件是如何链接的，地图显示的是确定的，或者是混乱的，有丢失的瓷砖的顺序不对，这意味着css没有被考虑在内。

我设法使它能够使用两个解决方案，将css链接到应用程序级别(全局)，但永远不会只连接到组件。下面是我尝试过的内容(除了阅读关于css/传单/角的几篇文章)：

Worked --全球级别：

// styles.css
@import url("assets/lib/leaflet/leaflet.css");

Worked --全球级别：

// index.html
<link rel="stylesheet" href="./assets/lib/leaflet/leaflet.css" type="text/css">

没有运行--全球级别：

// angular.json
"styles": [
    "src/styles.css",
    "src/assets/lib/leaflet/leaflet.css"
],

没有工作-组件级别：

// ...

import * as L from "../assets/lib/leaflet/leaflet.js";
import "../assets/lib/leaflet/leaflet-bing-layer.js";
import { BingHelper } from "../assets/lib/bing/bing-helper.js";

// -> importing the .css file here does not work

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["../assets/lib/leaflet/leaflet.css"] // -> does not work
    
    // -> also tried to put the content of the .css in style: "", did not work neither

})
export class MapComponent implements AfterViewInit {
    ngAfterViewInit() {
        var map = L.map("map", {
            attributionControl: false,
            zoom: 8,
            minZoom: 3,
            maxZoom: 15,
            center: new L.LatLng(40.737, -73.923)
        });
        // ...

没有工作：封装组件级别：Load external CSS into component

从CDN加载而不是本地文件不会更改问题。

注意:我正在使用Bing层扩展，但这对这个问题没有影响。我也有同样的问题使用Mapbox瓷砖代替。

问题：是否有一种方法将传单css链接到组件中，并使其只用于组件，而不用于整个角应用程序？

Answer 1

好的，下面是起作用的东西(谢谢@Palsri，我再一次阅读了博客文章和棱角分明的样式指南，并尝试了以下几点，这是有效的)：

在一个单独的css文件中，导入传单css：

// map.component.css
@import url("../assets/lib/leaflet/leaflet.css");

.mapstyle {
    width: 100%;
    height:100%;
};

然后，在组件中引用此css而不是传单css，如下所示：

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["./map.component.css"],
    encapsulation: ViewEncapsulation.None
})

下面是html模板中的代码：

<div id="map" class="mapstyle"></div>

还有一件事:要使身高%工作，您需要定义父母的大小，我目前在index.html中这样做如下：

<style>
html, body {
    min-height: 100% !important;
    height:     100%;
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 0px;
}
</style>

Answer 2

做这个

@import url("path")

例：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")

或doig也是

@import "bootstrap/dist/css/bootstrap.min.css"