css - 页面中的 Ionic 4 SCSS 被忽略

Question

我在尝试让 SCSS 在 ionic 4 的页面中工作时遇到了噩梦。我正在使用在创建页面时生成的 scss 文件:ionic generate page

所以组件正在导入文件:

@Component({
  selector: 'app-singleform',
  templateUrl: './singleform.page.html',
  styleUrls: ['./singleform.page.scss'],
})

在单个 form.page.scss 文件中，我要做的就是将 .input-wrapper 从 display:flex 更改为 display:block 并且没有任何反应:

.input-wrapper {
  display: block !important;
}

我实际上可以看到代码是通过 dom 检查器加载的，它只是没有应用于标签和输入字段周围的输入包装器；它仍然显示 display: flex

我经常遇到这些问题，所有 scss 似乎都不起作用!

Answer 1

试试这个:

<!-- Inputs with Floating labels -->
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- Inputs with Stacked labels -->
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

有关更多详细信息，请查看:ion-input