web-dev-qa-db-fra.com

Ionic3: le meilleur moyen d'importer des CSS à partir de node_modules

J'essaie d'importer le fichier .css de full-calendar package.

Tout d'abord, j'ai créé un nouveau composant my-calendar (html, scss, ts).

Ensuite, j'ai essayé 3 manières différentes mais seule la dernière a fonctionné pour moi:

  1. Référencez le fichier directement, comme le suggère la documentation, dans index.html (il ne fonctionne pas car la référence à node_modules est perdue lors de la construction du projet)

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

  2. Ajout de @import "~fullcalendar/dist/fullcalendar.min.css"; dans my-calendar.scss. Si je ne me trompe pas, cela devrait ajouter le style dans main.css lorsque le projet est en cours de construction (ne fonctionne pas)

  3. Créer une configuration de copie personnalisée (copy.config.js)

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

    et en ajoutant @import "fullcalendar.min.css"; dans my-calendar.scss

METTRE À JOUR:
et en ajoutant @import "fullcalendar"; dans my-calendar.scss
pour éviter les erreurs de compilation lors de l’utilisation de ionic build --aot --minifycss --minifyjs

J'apprécierais que quelqu'un puisse clarifier la meilleure façon et expliquer si j'ai mal compris un concept.

PS: N'oubliez pas que je travaille avec Ionic3 et que je n'utilise pas l'interface CLI angulaire.

cssangularionic-frameworkimportionic3
17
Mario Padilla

la troisième méthode que vous utiliserez sera la meilleure façon de la mettre en œuvre, mais vous pouvez utiliser une méthode plus semblable à ionic . Vous devez utiliser le paramètre includePaths lors de la configuration du chemin personnalisé. sass.config.js dans le dossier du projet local où nous configurons des includePaths personnalisés comme ceci

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

Dans les scripts package.json, vous devez inclure le fichier de configuration CSS personnalisé, comme ceci:

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

Le seul problème avec cette implémentation est que lorsque vous mettez à jour ionic-app-scripts, vous devez comparer le fichier sass.config.js natif au fichier local et vérifier si quelque chose a changé.

Ceci est une méthode gênante et un problème a été soulevé dans Github mais malheureusement, le problème a été résolu avec la justification suivante.

Les configurations sont étendues, n'incluez donc que les champs que vous modifiez . Tout le reste héritera des valeurs par défaut.

6
Webruster

Depuis @ ionic/app-scripts: 3.2.0, il semble que vous ayez toujours besoin de @include FILE;quelque part Voir ceci numéro fermé sur le github du script d'application

J'ai trouvé que depuis 'Ionic Framework: ionic-angular 3.9.2' Vous avez deux choix: insérez votre importation dans src/theme/variables.scss ou src/app/app.scss.

Par exemple dans variables.scss

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

Et dans mon 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 */
0
radek79