I'm using angular 5. Im my module I'm using leaflet 1.2.0.
In leaflet.css I have trouble with images, for example, some css lines:
.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);
}
So, I need to access leaflet.css to its relative route, what I tried:
@Component({
selector: 'myComponent',
template:`<div id="myId" class="myClass"></div>`,
styleUrls: ['./myComponent.component.scss','/../../../../node_modules/leaflet/dist/leaflet.css'],
})
The folder structure:
--project_folder
--node_modules
--leaflet
--dist
--leaflet.css
--src
--app
--myComponentParent
--myComponent
--myComponent.component.ts
--myComponent.component.scss
--myComponent.component.html
Can I refer to folder out of src? How can I do it?
If you are using Angular CLI, you will need to add the Leaflet CSS file to the styles array contained in . angular-cli.json
and remove css import from other places
"styles": [
"styles.css",
"../node_modules/leaflet/dist/leaflet.css",
]
No need to add like this. in your angular-cli.json
file add style tag with the script path
"styles": [
"../node_modules/leaflet/dist/leaflet.css",
]
remove the script from your component
styleUrls: ['./myComponent.component.scss'],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.