create-react-app build 删除 css min 函数

Question

我在通过create-react-app的 React 应用程序的SCSS文件中有以下内容：

div.letterCaret {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: css-min(10px, 1.3vh) solid transparent;
  width: 10px;
  height: 10px;
  border-top-color: inherit;
}

div.stringUnderscore {
  height: css-clamp(0.3rem, 15%, 1rem);
  border: $underScoreBorderWidth solid;
  border-top: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: left 400ms $easeOutCirc, width 400ms $easeOutCirc, border-color 400ms $easeOutCirc;
}

当我运行 npm run build 时，它编译为：

div.letterCaret {
    content: "";
    display: block;
    top: 0;
    border: solid transparent;
    width: 10px;
    height: 10px;
    border-top-color: inherit
}

div.letterCaret, div.stringUnderscore {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

div.stringUnderscore {
    height: clamp(.3rem, 15%, 1rem);
    border: .2rem solid;
    border-top: none;
    transition: left .4s cubic-bezier(0, .55, .45, 1), width .4s cubic-bezier(0, .55, .45, 1), border-color .4s cubic-bezier(0, .55, .45, 1)
}

在 div.letterCaret border: css-min(10px, 1.3vh) solid transparent; 变成border: solid transparent; . 这只发生在构建中，而不是npm run start （即开发）中，它可以正常工作。 尽管显式调用了 css 函数，但我似乎无法修复它，我做错了什么？

尝试过的其他解决方案：

• 创建一个直接在index.html头部调用的overrides.css文件； 这有效，但感觉很糟糕，我想知道为什么上述内容无法理解如何正确修复它
• 在scss文件之后直接将overrides.css导入index.js ，但它被忽略
• 使用大写 Max/Min/Clamp 绕过 SASS nativ max/min/clamp 问题
• 使用自定义函数，例如 css-max 显式使用 CSS 函数（当前设置）； 这似乎适用于其他用途，而不是专门用于边界

Answer 1

如果您想使用create-react-app并使用SCSS那么您可以通过键入以下内容来安装node-sass库：

npm install node-sass --save

有关如何一起使用node-sass和create-react-app的完整说明，请参阅“如何在创建 React 应用程序中使用 SASS？”： https : //www.robinwieruch.de/create-react-app-with-sass -支持

您也可以在此处查看create-react-app的官方文档： https : //create-react-app.dev/docs/adding-a-sass-stylesheet/

Answer 2

经过大量挖掘，我认为这是使用过时版本的cssnano的react-scripts包的问题，​​这导致了该问题，此后已在版本 5+ 中解决，但react-scripts使用 4.11.1。

为了解决这个问题，我已经改用sass来编译 css 并将其直接链接到index.html ，这并不是一个真正的解决方案，更多的是用不同的方式来做，但我对npm理解不够好，无法更新嵌套的依赖项（我试过一切都坏了）。