How to add css file from npm package?

Ionic Framework ionic-v3
1

I installed http://leafletjs.com to show map in my application. Leaflet demands adding css file to the project. How can I import it to Ionic 2 application ?

1 Like
2

You need to include <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> (as stated here) http://leafletjs.com/examples/quick-start.html. Add this line in index.html just below the line where all the other stylesheets are imported. The file located in www folder of your project.

This needs internet connection to fetch the css file. If you want to make it work offline. Simply download the css file and link it in your html file. But i hope that your maps will always require a net connection so you can leave it like that.

I hope you have included the js file alredy

3

Thanks! I’ve just done that. I hope there is more elegant way to this than adding my assets by hand.

4

You can modify the gulpfile.js to include the resources of your npm package.

gulp.task('sass', function(){
  return buildSass({
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/leaflet/dist'
      ]
    }
  });
});

And then just import the style in app.core.scss:

@import "leaflet";

Take a look at https://github.com/tsubik/ionic2-geofence/blob/master/gulpfile.js and https://github.com/tsubik/ionic2-geofence/blob/master/app/theme/app.core.scss

The build process is documented in https://github.com/driftyco/ionic-gulp-tasks

Edit: Also take a look at Where should I put images? to include static images.

I use the following code in my gulpfile.js:

gulp.task('images', function() {
    return gulp.src([
        'app/assets/images/*',
        'node_modules/leaflet/dist/images/*'
    ])
        .pipe(gulp.dest('www/build/images'));
});

and

runSequence(['images', 'sass', 'html', 'fonts', 'scripts'],
5

Hi your commands worked wonderfully of solving the above error. I have used the tsubik gulpfile and your above code but still getting an error in Ionic-2 latest beta of today. It is gives me the error:
Error: Couldn’t autodetect L.Icon.Default.imagePath, set it manually.

If i try to set it it tells me imagepath is not a property of Icon. Any ideas??

What version of leaflet were you in npm and typings?