Ionic 2 using custom css

Question

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:

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>

I am trying to add some properties in slider.scss but it has no effect. How can apply some styles to it?
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?

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

flame3 · Accepted Answer · 2016-10-09 05:45:43Z

3

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.

answered Oct 9, 2016 at 5:45

flame3

3,0301 gold badge28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sebaferreras · Accepted Answer · 2016-06-28 14:02:57Z

1

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.

edited Jun 28, 2016 at 14:02

answered Jun 28, 2016 at 13:57

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

1 Comment

Thinker Over a year ago

That worked! Thanks for giving this extra info about gulf file, I didn't know gulp in much detail! That's the disadvantage of using boilerplate!

Collectives™ on Stack Overflow

Ionic 2 using custom css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related