ionic2 - Ionic 2 using custom css -
i building ionic2 app (actually learning), , trying apply custom css component, not successful.
my app folder structure following:
my app.core.css:
@import "../pages/start/start"; @import "../pages/farmlist/farmlist"; @import "../pages/slider/slider"; @import "../pages/farm/farm";
my slider.component.ts
<ion-slides #myslider [options]="myslideoptions" id="myslides"> <ion-slide > <div padding> <h1>welcome swarms app</h1> <p>here can view, manage , manipulate 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>
- i trying add properties in slider.scss has no effect. how can apply styles it?
- also, created folder 'img' www/build/img , put few images in there, on whenever restart ionic app ionic serve, folder vanished, why?
update: first problem solved, simple typo in components had styleurls:['/slider.scss']
and not styleurls:['/slider.css']
also, created folder 'img' www/build/img , put few images in there, on whenever restart ionic app ionic serve, folder vanished, why?
when run ionic serve
javascript , styles files compiled , put (among other tasks) in build
folder, , that's why if put somethig there, deleted.
in order avoid that, should put images in www\images
, reference them in code doing:
<img src="images/myimage.png" />
======================
edit:
you can find more information what's going on when run ionic serve
(and emulate
, deploy
, build
) taking @ gulpfile.js
:
/** * ionic hooks * add ':before' or ':after' ionic project command name run specified * tasks before or after command. */ gulp.task('serve:before', ['watch']); gulp.task('emulate:before', ['build']); gulp.task('deploy:before', ['build']); gulp.task('build:before', ['build']);
and in lasts lines of code of gulpfile.js
can see this:
gulp.task('clean', function(){ return del('www/build'); });
which causes build
folder deleted.
Comments
Post a Comment