媒體查詢在使用 Preact 時沒有反映

Question

我正在嘗試在反應中使用我現有應用程序的 Preact

@media only screen and (min-width: 320px) and (max-width: 768px) 
    {
      .card {
         margin-top: 12px;
     }
      .card-body {
          padding: 12px;
       }
  }

但是 css 沒有反映在 Preact 中，它采用了網站樣式的默認樣式。

未找到特定文件。

請讓我知道它是如何工作的。

提前致謝。

Answer 1

這可能是關於 preact preact-cli的問題，而不是 Preact 本身。

如果是這樣，我猜 CSS 文件被視為一個 CSS 模塊，它將作為任何 classNames 的前綴（並且需要在您的源代碼中反映這一點）。 作為解決方法，請嘗試：

:global {
  @media only screen and (min-width: 320px) and (max-width: 768px) 
  {
    .card {
      margin-top: 12px;
    }
    .card-body {
      padding: 12px;
    }
  }
}