媒体查询未触发（Angular）答案

【问题标题】：Media Queries not firing (Angular)媒体查询未触发（Angular）
【发布时间】：2020-08-06 19:00:23
【问题描述】：

我有一个问题，即任何媒体查询在 Angular 组件中都不起作用。然而，非基于查询的样式正在应用：

auth-page.component.html

<div class="layout-container">
    <h1>Hello world</h1>
</div>

auth-page.component.scss

@import './../../styles/layout';

_layout.scss

@import './mixins';
@import './variables';

.layout-container {
    padding : 12px;
}

@media only screen and (min-witdh: 100px) {
    .layout-container {
        background-color: red !important;
    }
}

我已经在我的 index.html 文件中包含了视口标签：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

应用了正常的填充，我已经尝试了我能想到的一切。我已经嵌套了查询，将类嵌套在查询中......一切。

我多年来一直在使用 Angular，但从未遇到过这个问题。我完全不知所措，我希望 CSS 根本不起作用，不仅仅是它的一部分。

【问题讨论】：

标签： html css angular sass

【解决方案1】：

检查您的拼写：min-witdh。

还有一件事。每当您将某些内容导入到有角度的本地组件 scss 中时。您将全局代码复制到其中。您永远不应该将全局 scss 导入本地，因为如果全局 scss 增长，应用程序代码可能会增长很多。但是如果你不导入全局文件，你最终会重复规则。所以我得出的结论是，应该避免 angular 提供的本地组件 scss。而是将全局 scss 划分为单独的文件，并且只在全局范围内导入一次。

【讨论】：

这将是那些日子之一? Derpday 快乐！也谢谢你的建议！幸运的是，这个项目正处于开始阶段，因此重构它需要 2 分钟。
导入是一个棘手的问题，因为所有基本的角度示例都使用它。但我在大型应用程序中表现不佳。我也怀疑它如何与主题配合使用。我很确定我正在做某事。例如：angular-bootstrap 是一个很好用的 angular 库。但它不包括任何风格。您需要导入普通的引导程序。我认为一个组件不应该包含它的样式