我有一个全新的CRA(带TypeScript)应用，我已经通过遵循 this official guidance 的方式将Sass添加到了其中，包括(这是重要的部分)使用 SASS_PATH 环境变量来缩短我的导入路径的建议。所以我的 .env 文件中有

SASS_PATH=./src/styles

在 src/styles 中，我有以下 _variables.scss 文件：

$body-padding: 1rem;
$body-bg-color: magenta;
$body-text-color: yellow;

这被以下 src/App.scss 文件使用：

@use "variables";
body {
    padding: variables.$body-padding;
    color: variables.$body-text-color;
    background-color: variables.$body-bg-color;
}

而这又被以下 App.tsx 导入：

import './App.scss';
function App() 
{
    return (<>
        <h1>Super Cool Site</h1>
        <p>With profound and super cool content.</p>
    </>);
}
export default App;

所有这些都运行、编译并生成了一个具有出色选择的颜色的美丽页面，正如预期的那样。

然而，在 npm 控制台中，有一个令人讨厌的巨大警告，关于具有非绝对路径的无效依赖项：

WARNING in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)        
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "src/"
 * "src/styles"
 * "src/styles/_variables"
 * and more ...
 @ ./src/App.scss 8:6-373 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-343 83:0-343 84:22-29 84:33-47 84:50-64 61:4-74:5 
 @ ./src/App.tsx 4:0-20
 @ ./src/index.tsx 7:0-24 11:33-36

包括在这个警告中的可怕文本 "deprecated behavior",这意味着它只是未来错误的一种局部阶段，总有一天会压垮我的应用程序在其可怕的翅膀下。
这个警告如果改变 App.scss 如何导入 _variables.scss,基本上就不再使用 SASS_PATH 了，就会消失。
这让我得出结论，任何(?)对 SASS_PATH 的使用都会引发这个警告；我在早先链接的官方指南中缺乏这种信息，这很奇怪。但似乎存在一个更普遍的问题：“具有模糊起始点的路径不再合法”，在最近的任何关于 React + SASS 的讨论中都没有得到警告。这让我感觉好像我漏掉了什么。
显然在我的小示例应用程序中，简单的解决方法就是根本不使用 SASS_PATH ,但在一个更大的应用程序中，SASS_PATH 可能很有吸引力。更重要的是，如果在一个 node_modules scss 文件中使用了模糊路径，那么似乎我们对此无能为力。
这实际上并不像我刚才说的那样假设性的；这就是我们在实际应用程序中遇到的问题，我们已经使用 @material 有好几年了，但我们现在正在尝试将其更新为 React 17 和 react-scripts 5. @material 's scss 充满了以 @use (隐式相对于 node_modules)开头的 "@material/ 路径，而新的webpack对每一个都表示不满。
这是否可以被认为是一个CRA bug?它没有警告 here (或者说似乎没有人知道会发生这种情况)给我留下了强烈的印象：“哦，我们不知道会发生这样的事情。”除了更新你的文档之外(顺便说一下，你应该完全这样做),我不知道还能做些什么。
其他我想回答的问题：

1. 还有其他人真的遇到了这个问题吗？
2. 为什么没有人遇到这个问题？
3. 我们是不是唯一使用 @material 与React的怪人？
4. 大多数其他常用的多包SCSS库(人们通常与React一起使用的)是否也这样做了？
5. 在 @material 的情况下，谁有丝滑的解决方案？

• 如果不行的话，有什么不舒服或更糟糕的解决方案？
• 根据我对 light useage of react-app-rewired 所了解的非常有限的webpack工作原理，我想象着创建某种东西(一个“加载器”，也许？)并将其插入到webpack管道的某个地方，拦截所有的依赖路径，在webpack能够对其做出判断之前将非绝对路径解析为绝对路径。
• 即使你没有替代方案，请告诉我上面的想法对于一个四岁孩子如何制造婴儿的想法来说是否有可比性。