页面中的 Ionic 4 SCSS 被忽略答案

【问题标题】：Ionic 4 SCSS In Page Is Being Ignored页面中的 Ionic 4 SCSS 被忽略
【发布时间】：2019-12-19 01:48:03
【问题描述】：

我正在做一场噩梦，试图让 SCSS 在 ionic 4 中的页面中工作。我正在使用创建页面时生成的 scss 文件：离子生成页面

所以组件正在导入文件：

@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 做任何事情！

【问题讨论】：

在 global.css 中添加你的 CSS, //page selector app-register { .input-wrapper { display: block !important; } }
@user9088454 感谢您的回答，但这也不起作用！在 chrome 中检查它仍然显示 flex
你想要什么样的视图？
基本上，我只是希望表单标签在字段上方，而不是在它旁边，将包装器更改为显示块可以解决它，但无论我将 css 放在哪里，它都不会改变.
@GlenElkins 您可以使用这种格式的输入。堆叠标签

标签： css ionic-framework sass ionic4

【解决方案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

【讨论】：