Ionic 2使用自定义css

Question

我正在构建一个Ionic2应用程序（实际上我正在学习），并且我正在尝试将自定义css应用于我的组件，但是它没有成功。

我的app文件夹结构如下：

我的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，并在那里放了几张图片，但每当我用离子服务器重启我的离子应用程序时，文件夹就消失了，为什么？

更新：第一个问题已经解决，这是组件中的一个简单拼写错误，必须是styleUrls:['/slider.scss']而不是styleUrls:['/slider.css']

Answer 1

在src / assets文件夹中添加文件夹css。把你的CSS文件放在那里。在src / index.html文件中，添加此行 <link href="assets/css/yourCssFileName.css" rel="stylesheet"> 然后，您可以在其他页面中引用css文件中的任何内容，就像您通常使用网页一样。

Answer 2

  

另外，我创建了一个像www / build / img这样的文件夹'img'并放了几张图片   在那里，但每当我用离子发球器重新启动我的离子应用程序时，   文件夹消失了，为什么？

运行ionic serve时，build文件夹中的所有javascript和样式文件都会被编译并放在一起（以及其他任务），这就是为什么如果你把它放在那里，就会被删除。

为了避免这种情况，您应该将图片放在www\images中，然后通过以下操作在代码中引用它们：

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

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

编辑：

您可以通过查看{{1}来查找运行ionic serve（以及emulate，deploy和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'); }); 文件夹被删除的原因。