angular. How to import css from node_modules

Question

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?

santosh singh · Accepted Answer · 2017-12-27 15:50:22Z

9

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",
]

edited Dec 27, 2017 at 15:50

answered Dec 27, 2017 at 15:44

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miquel Canal Over a year ago

Since Angular +6 the .angular-cli.json has baeen replaced by .angular.json file.

Code Guru Over a year ago

what if i want to import it in specifc compoent's .scss

Sachila Ranawaka · Accepted Answer · 2017-12-27 15:43:08Z

5

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'],

answered Dec 27, 2017 at 15:43

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

angular. How to import css from node_modules

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related