预定义的CSS类无法正常工作ionic3

Question

我有添加

<button ion-button color="light">Light</button>

在 home.page.html 中，但不起作用

button ion-button看起来不像按钮，也不像按钮或文档所示 这是home.page.html

的代码

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Hello to Ionic</ion-card-title>
        <button ion-button color="primary">Light</button>
        <button ion-button>Default</button>
        <button ion-button color="secondary">Secondary</button>
        <button ion-button color="danger">Danger</button>
        <button ion-button color="dark">Dark</button>
      </ion-card-header>
      <ion-card-content>
        <p class = "balanced">Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://beta.ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

结果是

这是-----------------------------------------的代码----------------------------- home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Answer 1

看看url。如果您在下面有颜色，则可以使用它。

theme/variables.scss

将此文件导入$colors: ( primary: #ED1B24, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, orange: #ffa500 );

app.scss

并像这样@import './theme/variables.scss';

使用