Angular 5和CSS Grid – 无法找到网格区域 – 警告

我使用CLI创建了一个新的Angular 5.2项目(例如ng new MyApp)

更改到文件夹并运行应用程序工作正常. (例如发球)

我对生成的代码进行了以下更改(见下文).只有HTML和CSS代码更改,非常小,我发布的是整个更改.

当我保存代码时,它会重新编译,并抛出警告：

ErrorEmittedError: (Emitted value instead of an instance of Error)
autoprefixer: D:\MyApp\src\app\app.component.css:51:7: Can not find
grid areas: header,nav,content,sidebar,ad,footer

该错误似乎与CSS的媒体查询部分有关.如果我删除该部分,则错误消失.

我不记得在Angular 4.x中发生过这种情况吗？有什么想法发生了什么？

app.component.html

<div class="wrapper">
  <header class="main-head">The header</header>
  <nav class="main-nav">
      <ul>
          <li><a href="">Nav 1</a></li>
          <li><a href="">Nav 2</a></li>
          <li><a href="">Nav 3</a></li>
      </ul>
  </nav>
  <article class="content">
      <h1>Main article area</h1>
      <p>In this layout,we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout,and then to a three column layout by redefining the grid,and the placement of items on the grid.</p>
  </article> 
  <aside class="side">Sidebar</aside>
  <div class="ad">Advertising</div>
  <footer class="main-footer">The footer</footer>
</div>

app.compnent.css

.main-head {
    grid-area: header;
  }
  .content {
    grid-area: content;
  }
  .main-nav {
    grid-area: nav;
  }
  .side {
    grid-area: sidebar;
  }
  .ad {
    grid-area: ad;
  }
  .main-footer {
    grid-area: footer;
  }

  .wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
      "header"
      "nav"
      "content"
      "sidebar"
      "ad"
      "footer";
  }

  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header header  header"
        "nav    content sidebar"
        "nav    content ad"
        "footer footer  footer"
     }
     nav ul {
       flex-direction: column;
     }
  }

解决方法

我遇到了类似的问题,到目前为止我找到的解决方案不是很好,因为它复制代码,但它可能对你有所帮助.

首先我意识到错误只是一个警告,代码符合条件但没有问题,但它令人担忧,所以我在花括号中添加了我在@media之外定义的类,所以使用你的代码看起来像这样：

.main-head {
    grid-area: header;
  }
  .content {
    grid-area: content;
  }
  .main-nav {
    grid-area: nav;
  }
  .side {
    grid-area: sidebar;
  }
  .ad {
    grid-area: ad;
  }
  .main-footer {
    grid-area: footer;
  }

  .wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
      "header"
      "nav"
      "content"
      "sidebar"
      "ad"
      "footer";
  }

  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header header  header"
        "nav    content sidebar"
        "nav    content ad"
        "footer footer  footer"
     }
     nav ul {
       flex-direction: column;
     }
      .main-head {
        grid-area: header;
      }
      .content {
        grid-area: content;
      }
      .main-nav {
        grid-area: nav;
      }
      .side {
        grid-area: sidebar;
      }
      .ad {
        grid-area: ad;
      }
      .main-footer {
        grid-area: footer;
      }
  }

我再次不喜欢这个解决方案,但它摆脱了错误.