CODEWITHSUNDEEP
ionic-frameworkionic2
Thinker
Thinker

Reputation: 5356

Ionic 2 using custom css

I am building an Ionic2 app (actually I am learning), and am trying to apply custom css to my component, however it is not successful.

My app folder structure is as following: enter image description here

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 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>

UPDATE: First problem is solved, it was a simple typo in components where it had to be styleUrls:['/slider.scss']and not styleUrls:['/slider.css']

Upvotes: 0

Views: 10875

Answers (2)

flame3
flame3

Reputation: 2992

Add a folder css in the src/assets folder. Put your css file there. In the src/index.html file, add this line <link href="assets/css/yourCssFileName.css" rel="stylesheet"> Then you can refer to anything in the css file in your other pages as what you normally do with web pages.

Upvotes: 3

sebaferreras
sebaferreras

Reputation: 44659

Also, I created a folder 'img' like www/build/img and put few images in there, but on whenever I restart my ionic app with ionic serve, the folder is vanished, WHY?

When you run ionic serve all the javascript and styles files are compiled and put together (among other tasks) in your build folder, and that's why if you put somethig there, is deleted.

In order to avoid that, you should put your images in www\images and then reference them in your code by doing:

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

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

EDIT:

You can find more information about what's going on when you run ionic serve (and also emulate, deploy and build) by taking a look at your 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']);

And in the lasts lines of code of the gulpfile.js you can see this:

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

Which is what causes the build folder to be deleted.

Upvotes: 1

Related Questions