Ionic3: der beste Weg zum Importieren von CSS von node_modules

Question

Ich versuche, das. CSS aus full-calendar Paket zu importieren.

Zuerst habe ich eine neue Komponente My-Kalender (html, scss, ts) erstellt.

Dann habe ich versucht, 3 verschiedene Möglichkeiten, aber nur die letzten für mich gearbeitet:

1. Referenz der Datei direkt, wie die Dokumentation vorgeschlagen, in den index.html (es nicht, weil funktioniert der Verweis auf node_modules verloren, wenn Sie das Projekt)

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

2. Hinzufügen @import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scs bauen s. Wenn ich nicht falsch bin, sollte dies den Stil in main.css hinzufügen, wenn das Projekt gebaut wird (nicht funktioniert)

3. individuelle Kopie Config erstellen (copy.config.js)

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

   und Hinzufügen von @import "fullcalendar.min.css"; in my-calendar.scss

UPDATE:
und das Hinzufügen von @import "fullcalendar"; in my-calendar.scss
zu Compiler-Fehler, wenn die Verwendung ionische Build --aot --minifycss zu vermeiden - -minifyjs

Ich würde schätzen, wenn jemand den besten Weg erklären und erklären könnte, wenn ich irgendein Konzept missverstand.

PS: Denken Sie daran, dass ich mit Ionic3 arbeite und die Angular CLI nicht verwende.

Answer 1

dritte Methode von Ihnen wird der beste Weg sein, zu implementieren, aber es kann auf eine andere Weise mehr wie ionische getan werden. Sie müssen die Verwendung des includePaths machen, wenn Sie den benutzerdefinierten Pfad konfigurieren, wie wir mit benutzerdefinierten CSS zu tun haben, fügen sass.config.js zu lokalen Projektordner, in dem wir kundenspezifische Include-ähnliche

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

In package.json Skripte gehören benutzerdefinierte CSS konfigurieren Konfigurationsdatei wie folgt aus:

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

das einzige Problem bei dieser Implementierung ist, wenn Sie ionic-app-scripts aktualisieren Sie haben die native sass.config.js Datei auf die lokale Datei zu vergleichen und überprüfen, ob es etwas geändert ist.

Dies ist ein mühsames Verfahren und ein Problem wurde in Github angehoben, aber leider geschlossen sie das Problem mit der folgenden Begründung

Configs erweitert werden, umfassen, so dass nur die Felder, die Sie ändern. Alles andere erbt die Standardwerte.