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，并在其中放了一些图片，但是每当我使用 ionic serve 重新启动我的 ionic 应用程序时，该文件夹就会消失，为什么？

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

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

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

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

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

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

编辑：

您可以通过以下方式找到有关运行 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');
});

导致 build 文件夹被删除的原因。

Answer 2

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

Ionic 2 使用自定义 css

Ionic 2 using custom css

ionic-framework

ionic2