角。

2017-12-27 12 views
1

私は角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のうち、フォルダを参照することはできますか?どうしたらいいですか?

答えて

4

あなたangular-cli.jsonファイルにあなたのコンポーネントからスクリプトを削除するスクリプトのパス

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

でスタイルタグを追加しますに含まれる配列。 angular-cli.json他の場所からCSSのインポートを取り除く

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

このように追加する必要はありません。あなたが角度CLIを使用している場合は、スタイルにリーフレットのCSSファイルを追加する必要があります

​​