Ionic 2 using custom css

Question

Я создаю приложение Ionic2 (на самом деле я учу), и пытаюсь применить пользовательский css к моему компоненту, однако это не удастся.

Моя структура папок приложения выглядит следующим образом:

Мой app.core.css:

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

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

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

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

Мои slider.component.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> 

• Я пытаюсь добавить некоторые свойства в slider.scss, но это не влияет. Как применить к нему некоторые стили?
• Кроме того, я создал папку «img», например www/build/img, и помещал туда несколько изображений, но когда я перезапускаю свое ионное приложение с ионной подачей, папка исчезает, ПОЧЕМУ?

UPDATE: Первая проблема решена, это была просто опечатка в компонентах, где он должен был быть styleUrls:['/slider.scss'] и не styleUrls:['/slider.css']

Answer 1

Кроме того, я создал папку «IMG», как WWW/сборки/img и поместите несколько изображений там, но когда я перезапускаю свое ионное приложение с ионной подачей, папка исчезла, ПОЧЕМУ?

При запуске ionic serve всех JavaScript и стили файлы компилируются и вместе взятые (среди других задач) в папке build, и поэтому, если вы поставите somethig там, удаляются.

Для того, чтобы избежать этого, вы должны поместить изображения в www\images, а затем ссылаться на них в своем коде, выполнив:

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

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

EDIT:

вы можете найти более подробную информацию о том, что происходит, когда вы запускаете ionic serve (а также emulatedeploy, и build) по взглянуть на ваши 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']); 

А в длится строк кода gulpfile.js вы можете увидеть это:

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

Что и приводит к папке build будут удалены.

Answer 2

Добавить папку css в папку src/assets. Поместите свой файл css. В файле src/index.html добавьте эту строку. <link href="assets/css/yourCssFileName.css" rel="stylesheet"> Затем вы можете ссылаться на что-либо в файле css на своих других страницах так же, как вы обычно делаете на веб-страницах.