create-react-app 构建删除 css min 功能答案

【问题标题】：create-react-app build removing css min functioncreate-react-app 构建删除 css min 功能
【发布时间】：2021-07-22 00:19:03
【问题描述】：

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

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 函数，我似乎无法修复它，我做错了什么？

尝试了其他解决方案：

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

【问题讨论】：

标签： css reactjs sass build create-react-app

【解决方案1】：

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

npm install node-sass --save

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

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

【讨论】：

感谢您的回复，但node-sass 已安装。其他一切都正确编译，只是不是border: css-min(10px, 1.3vh) solid transparent;
您可以在这里找到一些可能有帮助的答案：github.com/sass/sass/issues/2849
是的，这是我查看的第一个线程之一，它是我从中获取 min-css 等函数以尝试显式调用它们的地方。我认为这与样式的缩小方式有关，因为它只发生在上面引用的样式上
好的，你试过了吗？在 node-sass 文档中说你必须使用 --output-style，它可以嵌套 |展开 |紧凑型|压缩。要缩小使用压缩。例如：node-sass -w public/css/scss/style.scss public/css/style.css --output-style compressed
有趣的是，如果我在index.js 中删除style.scss（或style.css）的导入并直接在index.html 中调用它，即使我使用--style，问题也得到了解决压缩（虽然我使用的是常规的 sass 而不是 node-sass，因为我不再导入”

【解决方案2】：

经过大量挖掘，我认为这是react-scripts 包使用过时版本的cssnano 的问题，这会导致问题并具有since been addressed in version 5+ 但react-scripts 使用4.11 .1.

要解决方法，我已切换到使用 sass 编译 css 并将其直接链接到 index.html，这并不是真正的解决方案，而是以不同的方式进行，但我不太了解 npm更新嵌套依赖（我试过了，一切都坏了）。

【讨论】：