Ionique 2 à l'aide de css personnalisé

Je suis de la construction d'une Ionic2 application (en fait, je suis en train d'apprendre), et suis en train d'appliquer la coutume css de mon composant, cependant il n'est pas couronnée de succès.

Mon dossier app structure est comme suit:
Ionique 2 à l'aide de css personnalisé

Mon application.de base.css:

@import "../pages/start/start";

@import "../pages/farmList/farmList";

@import "../pages/slider/slider";

@import "../pages/farm/farm";

Mon curseur.composante.ts

<ion-slides #mySlider [options]="mySlideOptions" id="mySlides">

  <ion-slide >
    <div padding>
      <h1>Welcome to Swarms app</h1>
      <p>Here you can view, manage and manipulate all your data</p>
    </div>

  </ion-slide>

  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>

  <ion-slide>
    <h1>Slide 3</h1>
    <button (click)="goToHome()">Start</button>
  </ion-slide>

</ion-slides>
  • Je suis d'essayer d'ajouter des propriétés à curseur.scss mais il n'a pas d'effet. Comment pouvez appliquer des styles à elle?
  • Aussi, j'ai créé un dossier " img " comme www/build/img et mettre quelques images de là, mais à chaque fois que je redémarre mon ionique app avec ionique servir, le dossier a disparu, POURQUOI?

Mise à JOUR: Premier problème est résolu, c'était une simple faute de frappe dans les composants où il devait être styleUrls:['/slider.scss']et pas styleUrls:['/slider.css']

InformationsquelleAutor Thinker | 2016-06-28
  1. 1

    Aussi, j'ai créé un dossier " img " comme www/build/img et mettre quelques images
    là, mais à chaque fois que je redémarre mon ionique app avec ionique servir, l'
    le dossier est disparu, POURQUOI?

    Lorsque vous exécutez ionic serve tous les javascript et les styles, les fichiers sont compilés et mis en place (entre autre) dans votre build dossier, et c'est pourquoi, si vous mettez somethig il, est supprimé.

    Afin d'éviter cela, vous devez placer vos images dans www\images puis de référence dans votre code en faisant:

    <img src="images/myImage.png" />

    ======================

    EDIT:

    Vous pouvez trouver plus d'informations sur ce qui se passe lorsque vous exécutez ionic serve (et aussi emulate, deploy et build) en prenant un coup d'oeil à votre gulpfile.js:

    /**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

    Et dans la dure lignes de code de la gulpfile.js vous pouvez voir ceci:

    gulp.task('clean', function(){
  return del('www/build');
});

    Qui est ce qui provoque la build dossier à supprimer.

    • Qui a travaillé! Merci de donner cette information supplémentaire au sujet du golfe de fichier, je ne savais pas avaler beaucoup de détails! C'est l'inconvénient de l'utilisation de passe-partout!
    InformationsquelleAutor sebaferreras
  2. 3

    Ajouter un dossier css dans le répertoire src/dossier des actifs. Mettez votre fichier css il. Dans le src/index.html fichier, ajoutez cette ligne
    <link href="assets/css/yourCssFileName.css" >
    Ensuite, vous pouvez vous référer à quoi que ce soit dans le fichier css dans vos autres pages que ce que vous faites normalement avec des pages web.

    • Belle réponse. Résolu mon problème. Merci s'accoupler 😉
    InformationsquelleAutor flame3