Including Stylesheets From Node Packages In ionic

Ionic Framework ionic-v3
1

In retrospect this seems pretty obvious, but I had a bit of a hard time working this out and I thought others could benefit.

So if like me, you are trying to pull in a node package into your ionic 2 project that includes a stylesheet, the first thing you are going to notice is that the packages stylesheet/s are not added to your app.

The easiest way to add the packages stylesheet/s to your ionic 2 app is to firstly narrow down where you will be using those particular styles in your app. If you will be using the styles everywhere, simply go to your app.scss and add an @import "../../node_modules/{module_to_add_here}/{path_to_module_scss_file} inside. Otherwise if you will only be needing the packages styles on one particular page you can add @import "{as_many../_as_needed}node_modules/{module_to_add_here}/{path_to_module_scss_file} to the pages scss file where you will using the packages styles.

For those of you who work better with an example, here is one below.

For my ionic 2 app I was trying to add the video.js package found here, and I knew that I only needed the video.js stylesheet on one page; my video-player page. So to add the video.js stylesheet to my video-player page I navigated to my video-player.scss file and added @import "../../../node_modules/video.js/src/css/video-js"; to the top of it. That’s it! Below is my video-player.scss after adding the @import.

@import "../../../node_modules/video.js/src/css/video-js";
page-video-player {
  #my-player{
    height: 100%;
  }
}

Hope this helps somebody!

7 Likes
2

Another option if you don’t like ugly relative paths and node_modules junk in your theming files is to provide a custom sass.config.js file as described here and add things to its includePaths.

3

only works with scss though right? not css…

4

I think this works fine with css files.
btw thank you OP! Huge help.