时间戳

首页 > 解决方案 > 页面中的 Ionic 4 SCSS 被忽略

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

问题描述

我正在做一场噩梦，试图让 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似乎没有做任何事情！

标签： cssionic-frameworksassionic4

解决方案

尝试这个：

<!-- 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>

有关更多详细信息，请查看：离子输入

推荐阅读