title: Custom property ignored: not scoped to the top-level :root element
body: <p>.angular-cli.json</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "tensor web"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.scss",
          "../node_modules/firebaseui/dist/firebaseui.css"
        ],
        "scripts": [
        .....
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
        ....
        }
      }
    ],
    "e2e": {
     .....
    },
    "lint": [
     .....
    ],
    "test": {
     .....
    },
    "defaults": {
     .....
    }
  }
  </code></pre>
  
  <p>tensor-variables.scss</p>
  
  <pre><code>$body-bg:                   #ecf0f1;
  </code></pre>
  
  <p>styles.scss</p>
  
  <pre><code>$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
  @import './css/tensor-variables.scss';
  @import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
  @import './css/core/global.scss';
  @import './css/core/utils.scss';
  
  @import './css/layout/sidebar.scss';
  @import './css/layout/navbar.scss';
  @import './css/layout/container.scss';
  
  $fa-font-path: './fonts' !default;
  @import '~font-awesome/scss/font-awesome';
  
  // prebuilt Themes
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";
  
  app-root.arctic {    
    --app-bg-color: $body-bg;
  }
  </code></pre>
  
  <blockquote>
    <p>WARNING in
    ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
    (Emitted value instead of an instance of Error)
    postcss-custom-properties:
    /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3:
    Custom property ignored: not scoped to the top-level :root element
    (app-root.arctic { ... --app-bg-color: ... }) NonErrorEmittedError:
    (Emitted value instead of an instance of Error)
    postcss-custom-properties:
    /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3:
    Custom property ignored: not scoped to the top-level :root element
    (app-root.arctic { ... --app-bg-color: ... })
        at Object.emitWarning (/Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/webpack/lib/NormalModule.js:117:16)
        at /Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/postcss-loader/index.js:131:24
        at Array.forEach ()
        at /Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/postcss-loader/index.js:130:31
        at   @ ./src/styles.scss 4:14-187  @ multi ./src/styles.scss ./node_modules/firebaseui/dist/firebaseui.css</p>
  </blockquote>