Angular 5 和 CSS 网格 - 找不到网格区域 - 警告

Question

我使用 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;
     }
  }

Answer 1

我遇到了类似的问题，到目前为止我找到的解决方案不是很好，因为它会重复代码，但它可能对您有所帮助。

首先我意识到这个错误只是一个警告，代码没有问题，但它令人担忧所以我添加了类我在花括号内的@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;
      }
  }

同样，我不喜欢这个解决方案，但它消除了错误。

Answer 2

如果您正在使用 Sass，为了不重复自己太多，创建一个带有混合的部分 (_grid-areas.scss)：

@mixin grid-areas {
body {
    .leftbar { grid-area: leftbar; }
    .rightbar { grid-area: rightbar; }
    .main { grid-area: main;
        header { grid-area: header; }
        #content {grid-area: content; }
    }
}

}

然后根据需要导入：

@import 'grid-areas';
@media screen and (max-width: 80em) {
  @include grid-areas;
}

清除我在 CLI 1.7.2 中的错误

Answer 3

在 Sass 中使用命名网格区域时出现此警告。

根据iwis发表的CSS Tricks文章，该问题是由于与Autoprefixer和IE浏览器对网格的支持冲突属性。

为了解决来自 Sass 的警告，我只是将属性 grid-template-areas: 替换为属性grid-template:。

Angular 5 和 CSS 网格 - 找不到网格区域 - 警告

Angular 5 and CSS Grid - Cannot find grid areas - warning

css

angular5

css-grid

autoprefixer