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

张量-variables.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" ;: ＆＃34; postcss＆＃34;} ./ node_modules / SASS装载机/ LIB / loader.js {＆＃34; sourceMap＆＃34;：！假，＆＃34;精密＆＃34;：8，＆＃34 ;的includepaths＆＃34;：！[]} ./ SRC / styles.scss （发出的值而不是Error的实例） postcss定制属性： /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3：忽略自定义属性：未限定为顶级：根元素（app-root.arctic {... --app-bg-color：...}）NonErrorEmittedError：（发出的值而不是Error的实例） postcss定制属性： /Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3：忽略自定义属性：未限定为顶级：根元素（app-root.arctic {... --app-bg-color：...}）在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 在Array.forEach（） at /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
    ]
}

自定义属性被忽略：没有作用于顶级：根元素

1 个答案: