自定义属性被忽略：不限于顶级 :root 元素

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;

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

警告 ./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 （发出的值而不是错误的实例） postcss-自定义属性： /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3: 自定义属性被忽略：不限于顶级 :root 元素 (app-root.arctic { ... --app-bg-color: ... }) NonErrorEmittedError: （发出的值而不是错误的实例） postcss-自定义属性： /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3: 自定义属性被忽略：不限于顶级 :root 元素 (app-root.arctic { ... --app-bg-color: ... }) 在 Object.emitWarning (/Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/webpack/lib/NormalModule.js:117:16) 在 /Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/postcss-loader/index.js:131:24 在 Array.forEach () 在 /Users/ishandutta2007/Documents/Projects/tensorweb/node_modules/postcss-loader/index.js:130:31 在@ ./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
    ]
}