Angular 5 and CSS Grid - Cannot Find Grid Areas - Warning

Question

I created a new Angular 5.2 project using the CLI (e.g. new MyApp)

Navigating to the folder and launching the application is wonderful. (e.g. ng serve)

I made the following changes to the generated code (see below). There are only changes to the HTML and CSS code, very minor, what I posted is the fullness of the changes.

When I save the code, it is recompiled and a warning is issued:

ErrorEmittedError: (The emitted value instead of the Error instance) autoprefixer: D: \ MyApp \ src \ app \ app.component.css: 51: 7: Cannot find grid areas: header, nav, content, sidebar, declaration, footer

The error seems to be related to the CSS multimedia requests section. If I delete this section, the error will disappear.

I do not remember how this happened in Angular 4.x? Any ideas what is going on?

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

I have a similar problem, and the solution I have found so far is not great, as it duplicates the code, but can help you.

At first, I understand that the error is just a warning, and the code matches without problems, however this is troubling, so I added classes that I defined outside @media in curly braces, so with your code it will look something like this: this:

.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;
      }
  }

Again I do not like this solution, but it gets rid of the error.

Answer 2

If you use Sass to not repeat yourself the same way, create a partial (_grid-areas.scss) with mixin:

@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