使用自定义 css 的 Ionic 2

Question

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

我的应用文件夹结构如下：

我的 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 中添加一些属性，但没有效果。怎么能应用一些样式呢？
• 另外，我创建了一个类似于 www/build/img 的文件夹“img”并在其中放置了一些图像，但是每当我使用 ionic serve 重新启动我的 ionic 应用程序时，该文件夹就会消失，为什么？

更新：第一个问题已解决，这是组件中的一个简单拼写错误，必须是 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 重新启动我的 ionic 应用程序时， 文件夹消失了，为什么？

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

为了避免这种情况，你应该把你的图片放在www\images，然后在你的代码中引用它们：

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

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

编辑：

查看gulpfile.js，您可以找到更多关于运行ionic serve（以及emulate、deploy 和build）时发生的情况的信息：

/**
 * 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 文件夹被删除的原因。