react-script build 错误地替换了 scss 文件中的 var()答案

【问题标题】：react-script build replaces var() in scss files incorrectlyreact-script build 错误地替换了 scss 文件中的 var()
【发布时间】：2022-01-04 16:53:13
【问题描述】：

我正在使用 create react app 4.0.3 和 node-sass 6.0.1 sass-loader 11.0.1。当我尝试构建我的项目时，css 文件的编译版本有错误的 var() 替换。我有一些我在相应组件 .tsx 中导入的 scss 文件。

import "../assets/scss/products.scss"

我在 index.scss 中定义了我的 :root 变量，并且它被导入到 index.tsx 中

import './index.scss';

我在scss文件中的用法是这样的

background-color: var(--white);

它编译成

background-color: var(#fff);

我相信某些软件包已更新并破坏了这一点，因为过去不是这样的

【问题讨论】：

也许可以用 node-sass 标记

标签： css node.js reactjs variables sass

【解决方案1】：

我遇到了同样的问题

sass@1.43.5
sass-loader@10.2.0
react-scripts@4.0.3

color: var(--gray-color-30) 编译成color: var(gray)。对于其他不带“灰色”前缀的颜色变量，也可以。

我能够通过重命名所有以“灰色”为前缀的变量来修复它。例如：var(--gray-color-30) 变为 var(--color-gray-30)。

【讨论】：

这不是答案，请不要在答案中提出其他问题。