角。 如何從node_modules導入css

Question

我正在使用角度5.我的模塊我正在使用傳單1.2.0。

在leaflet.css中我遇到圖像問題，例如，一些css行：

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(/assets/images/leaflet/layers-2x.png);
  background-size: 26px 26px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
  background-image: url(/assets/images/leaflet/marker-icon.png);
}

所以，我需要訪問leaflet.css到它的相對路徑，我嘗試了：

@Component({
  selector: 'myComponent',
  template:`<div id="myId" class="myClass"></div>`,
   styleUrls: ['./myComponent.component.scss','/../../../../node_modules/leaflet/dist/leaflet.css'],
})

文件夾結構：

--project_folder
  --node_modules
     --leaflet
         --dist
           --leaflet.css
  --src
    --app
      --myComponentParent
        --myComponent
          --myComponent.component.ts
          --myComponent.component.scss
          --myComponent.component.html

我可以參考src中的文件夾嗎？ 我該怎么做？

Answer 1

如果您使用的是Angular CLI，則需要將Leaflet CSS文件添加到包含在其中的樣式數組中。 angular-cli.json並從其他地方刪除css導入

"styles": [
         "styles.css",
        "../node_modules/leaflet/dist/leaflet.css",
]

Answer 2

無需像這樣添加。 在angular-cli.json文件中，使用腳本路徑添加樣式標記

"styles": [
        "../node_modules/leaflet/dist/leaflet.css",
]

從組件中刪除腳本

styleUrls: ['./myComponent.component.scss'],