Devextreme React “SassError: $color: [object Object] 不是颜色。”发生错误答案

【问题标题】：Devextreme React "SassError: $color: [object Object] is not a color." error occursDevextreme React “SassError: $color: [object Object] 不是颜色。”发生错误
【发布时间】：2022-01-13 15:43:49
【问题描述】：

我在我的 React 项目中使用 Devextreme，但更新后我在构建时遇到此错误..

“SassError: $color: [object Object] 不是颜色。”

版本：21.2.3

【问题讨论】：

请澄清您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs sass devextreme

【解决方案1】：

问题是当我尝试构建我的项目时，它会更改主题/生成中的文件

variables.additional.scss 到

$base-accent: [object Object];
$base-text-color: [object Object];
$base-bg: [object Object];
$base-border-color: [object Object];
$base-border-radius: [object Object];

和 variables.base.scss 文件到

$base-accent: [object Object];
$base-text-color: [object Object];
$base-bg: [object Object];
$base-border-color: [object Object];
$base-border-radius: [object Object];

但是，如果我将 [object Object] 更改为颜色，问题就消失了..

variables.additional.scss 到

$base-accent: #ff5722;
$base-text-color: #fff;
$base-bg: #363640;
$base-border-color: #515159;
$base-border-radius: 4px;

和 variables.base.scss 文件到

$base-accent: #ff5722;
$base-text-color: rgba(0, 0, 0, 0.87);
$base-bg: #fff;
$base-border-color: #e0e0e0;
$base-border-radius: 4px;

降级您的版本也可以解决问题

"devextreme-themebuilder": "20.2.6",

顺便说一句，在某些云上，它会自动升级并将其更改为最新。在这种情况下，您只需删除 devextreme.json 文件中的一些命令。

这个;

{
  "applicationEngine": "react",
  "build": {
      "commands": [
          {
              "command": "build-theme",
              "options": {
                  "inputFile": "src/themes/metadata.base.json",
                  "outputFile": "src/themes/generated/theme.base.css"
              }
          },
          {
              "command": "build-theme",
              "options": {
                  "inputFile": "src/themes/metadata.additional.json",
                  "outputFile": "src/themes/generated/theme.additional.css"
              }
          },
          {
              "command": "export-theme-vars",
              "options": {
                  "inputFile": "src/themes/metadata.base.json",
                  "outputFile": "src/themes/generated/variables.base.scss"
              }
          },
          {
              "command": "export-theme-vars",
              "options": {
                  "inputFile": "src/themes/metadata.additional.json",
                  "outputFile": "src/themes/generated/variables.additional.scss"
              }
          }
      ]
  }
}

使用这个；

{
  "applicationEngine": "react",
  "build": {
      "commands": [
          {
              "command": "build-theme",
              "options": {
                  "inputFile": "src/themes/metadata.base.json",
                  "outputFile": "src/themes/generated/theme.base.css"
              }
          },
          {
              "command": "build-theme",
              "options": {
                  "inputFile": "src/themes/metadata.additional.json",
                  "outputFile": "src/themes/generated/theme.additional.css"
              }
          }
      ]
  }
}

【讨论】：