css - 自定义属性被忽略 : not scoped to the top-level :root element

Question

.angular-cli.json

{
  "$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": {
   .....
  }
}

张量变量.scss

$body-bg:                   #ecf0f1;

样式.scss

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

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

Answer 1

我在使用 React/Webpack 时遇到了类似的问题。所以我添加了 postcss.config.js 文件和下面的代码

const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')

module.exports = {
    plugins: [
        postcssCssNext({
            features: {
                customProperties: {
                    warnings: false
                }
            }
        }),
        postcssImport
    ]
}