Ionic3 : the best way to import css from node_modules

Question

I am trying to import the .css from full-calendar package.

First, I created a new component my-calendar (html, scss, ts).

Then, I tried 3 different ways but only the last one worked for me:

1. Reference the file directly, as the documentation suggested, in the index.html (it does not work because the reference to node_modules is lost when you build the project)

   <link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">

2. Adding @import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scss. If I am not wrong, this should add the style into main.css when the project is being built (is not working)

3. Create custom copy config (copy.config.js)

   module.exports = {   
     ...   
     copyFullCalendar: {    
       src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],    
       dest: '{{BUILD}}'    
     }
   }
   

   and adding @import "fullcalendar.min.css"; into my-calendar.scss

UPDATE:
and adding @import "fullcalendar"; into my-calendar.scss
to avoid compiler errors when use ionic build --aot --minifycss --minifyjs

I would appreciate if someone could clarify the best way and explain if I misunderstood some concept.

PS: Remember that I am working with Ionic3 and I am not using the Angular CLI.

Answer 1

third method of yours will be the best way to implement , but it can be done in another way more like ionic. You need to make use of the includePaths when configuring the custom path , as we are dealing with custom css, add sass.config.js to local project folder where we configure custom includePaths like this

includePaths: [
    ....
    'node_modules/ap-angular2-fullcalendar'
 ],

In package.json scripts to include custom css configuration file, like this:

"scripts": {
    .....
    "ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
 },

Only problem with this implementation is when you update ionic-app-scripts you have to compare the native sass.config.js file to the local file and check if there is anything changed.

This is a troublesome method and an issue was raised in Github but unfortunately they closed the issue with the following justification

Configs are extended, so only include the fields that you're changing. Everything else will inherit the defaults.

Answer 2

As of @ionic/app-scripts : 3.2.0, it seems you'll still need to @include FILE; somewhere See this closed issue on app script's github

I found that as of 'Ionic Framework : ionic-angular 3.9.2' you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.

For example in variables.scss

/* some declarations here */
@import 'insrctest';/*file sits in src/test/insrctest.scss*/

And in my custom.config.js

includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */