angular-cli: autoprefixer can not find grid areas when using @media


Angular CLI: 1.7.2
Node: 9.4.0
OS: linux x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

Having @media tag prevents it from finding associated grid-area.

The following does output:

WARNING in ./src/app/core/footer/footer.component.scss (Emitted value instead of an instance of Error) autoprefixer: /.../footer.component.scss:28:6: Can not find grid areas: social


@media (min-width: 550px) {
  footer {
        "social ..."

.social {
  grid-area: social;

The following does NOT output any warning:

footer {
      "social ..."

.social {
  grid-area: social;

Desired behavior

@media should not prevent SCSS from finding grid-area outside its scope.



About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 12
  • Comments: 17

Commits related to this issue

Most upvoted comments

Remember it’s just a warning. IE does actually have support, but it’s partial support according to

You need IE support? should check what partial means ATM.

Is this related?

Seems to be fixed with autoprefixer 8.3.