web-dev-qa-db-fra.com

Angular 5 et CSS Grid - Impossible de trouver des zones de la grille - avertissement

J'ai créé un nouveau projet Angular 5.2 à l'aide de la CLI (nouvelle application, par exemple).

Changer dans le dossier et exécuter l'application fonctionne bien. (par exemple, servir)

J'ai apporté les modifications suivantes au code généré (voir ci-dessous). Il n'y a que des modifications de code HTML et CSS, très mineures, ce que j'ai posté est la totalité des modifications.

Lorsque je sauvegarde le code, il est recompilé et un avertissement est émis:

ErrorEmittedError: (Valeur émise au lieu d'une instance de Error) Préfixe automatique: D:\MyApp\src\app\app.component.css: 51: 7: Impossible de trouver Des zones de grille: en-tête , navigation, contenu, barre latérale, annonce, pied de page

L'erreur semble être liée à la section de requête multimédia de la CSS. Si je supprime cette section, l'erreur disparaît. 

Je ne me souviens pas de ce qui s'est passé dans Angular 4.x? Avez-vous une idée de ce qui passe?

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;
     }
  }
csscss3angular5css-gridautoprefixer
6
Todd Davis

J'ai un problème similaire et la solution que j'ai trouvée jusqu'à présent n'est pas une bonne solution car elle duplique le code, mais cela peut vous aider.

D'abord, je réalise que l'erreur est juste un avertissement et que le code est conforme sans problème, mais c'est inquiétant. J'ai donc ajouté les classes que j'ai définies en dehors de @media dans les accolades afin que votre code ressemble à ceci:

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

Encore une fois je n'aime pas cette solution mais elle élimine l'erreur.

7
SGTMcClain

Si vous utilisez Sass, pour ne pas vous répéter autant, créez un partiel (_grid-areas.scss) avec un 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; }
    }
}

}

Puis importez-le si nécessaire:

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

Efface mes erreurs dans CLI 1.7.2

2
Johnny