Angular-cli: Can not find grid areas: in Angular 5 with Angular Material

[marmik18]

Angular CLI: 1.6.7
Node: 9.3.0
Angular: 5.2.3

~package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/cdk": "^5.1.1",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.1.1",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angularfire2": "^5.0.0-rc.5-next",
    "core-js": "^2.4.1",
    "firebase": "^4.9.1",
    "hammerjs": "^2.0.8",
    "promise-polyfill": "7.0.2",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

~src/app/style.scss

body{
  position: fixed;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
app-login{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas: " . . ." " . wrapper . " " . . .";
}

~src/app/login/login.component.scss

.form-wrapper{
  background: white;
  grid-area: wrapper;
  border-radius: 4px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}

Warning Message
WARNING in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss (Emitted value instead of an instance of Error) autoprefixer: /Users/marmikthakkar/projects/deepblue/src/styles.scss:16:3: Can not find grid areas: wrapper NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: /Users/marmikthakkar/projects/deepblue/src/styles.scss:16:3: Can not find grid areas: wrapper at Object.emitWarning (/Users/marmikthakkar/projects/deepblue/node_modules/webpack/lib/NormalModule.js:117:16) at result.warnings.forEach (/Users/marmikthakkar/projects/deepblue/node_modules/postcss-loader/lib/index.js:149:49) at Array.forEach (<anonymous>) at postcss.process.then (/Users/marmikthakkar/projects/deepblue/node_modules/postcss-loader/lib/index.js:149:27) at <anonymous> @ ./src/styles.scss 4:14-191 @ multi ./src/styles.scss

So when i remove the line grid-template-areas: " . . ." " . wrapper . " " . . ."; in ~src/app/style.scss it complies without any warnings.

Can anyone help me with this issue?

Thank you in advance.

[clydin]

Global and component stylesheets existing within separate and distinct contexts. As a result autoprefixer cannot find the wrapper grid area as it does not exist within the context of the component. An Angular component should ideally be self contained (theming is a typical exception) and therefore should include necessary styles within its component stylesheets.

[zurfyx]

@clydin Is it possible to disable this warning through .angular-cli.json somehow or similar?

[stephengardner]

Why is this closed if there is an obvious stated exception to the rule?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}