忽略自定义属性:不限定于顶级 :root 元素 [英] Custom property ignored: not scoped to the top-level :root element

问题描述

.angular-cli.json

<代码>{"$schema": "./node_modules/@angular/cli/lib/config/schema.json",项目": {"name": "张量网"},应用": [{"root": "src","outDir": "dist",资产":[资产"，favicon.ico"],"index": "index.html","main": "main.ts","polyfills": "polyfills.ts","test": "test.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json",前缀":应用程序"，风格":["styles.scss",../node_modules/firebaseui/dist/firebaseui.css"],脚本":[.....],"environmentSource": "environments/environment.ts",环境":{....}}],e2e":{.....},棉绒":[.....],测试": {.....},默认值":{.....}}

张量变量.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';//预建主题@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(发出的值而不是 Error 的实例)postcss-custom-properties:/Users/ishandutta2007/Documents/Projects/tensorweb/src/styles.scss:8453:3:忽略自定义属性:不限定于顶级 :root 元素(app-root.arctic { ... --app-bg-color: ... }) NonErrorEmittedError:(发出的值而不是 Error 的实例)postcss-custom-properties:/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

解决方案

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

const postcssCssNext = require('postcss-cssnext')const postcssImport = require('postcss-import')模块.出口 = {插件: [postcssCssNext({特征: {自定义属性:{警告:错误}}}),postcss导入]}

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

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

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

解决方案

I had the similar issue with React/Webpack. So I added postcss.config.js file and following code in it

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

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

这篇关于忽略自定义属性:不限定于顶级 :root 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！