从CRA4更新到CRA5中断导入

Question

我们以前有react script@4.0.3，我正在尝试更新react script@5.0.1。不幸的是，在进入多填充问题(https://github.com/facebook/create-react-app/issues/11756)并希望通过别名解决它之后，我在SCSS文件中遇到了另一个问题。

应用程序运行时没有任何问题，一切正常，但编译后我得到webpack的警告：

WARNING in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/scss/index.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:
     * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme"
     * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.css"
     * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import"
     * and more ...

我无法摆脱这个警告。我试着进口了以下产品：

@import 'uikit/src/scss/mixins-theme';
@import '~uikit/src/scss/mixins-theme';
@import 'uikit/src/scss/mixins-theme.scss';
@import '~uikit/src/scss/mixins-theme.scss';

如果我用.scss导入它，它只会将无效的值更改为：

 * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss"
 * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.css"
 * "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.sass"

我在多个文件中有这个问题，我不知道是否解决了相对路径(我基本上在任何地方添加了绝对路径)，并且错误信息正在改变，但是由于我没有看到完整的错误日志，我不知道这些错误是否只是“移动”到较低位置，我得到了其中的前3位，或者它已经解决了。但这是奇怪的，因为我没有任何其他选项，如何编写导入。

这个混合主题是在导入scss的导入scss中导入的，导入scss是在index.scss内部(因此存在多个嵌套导入)。

Answer 1

好的，我们发现了问题，根据：https://github.com/facebook/create-react-app/issues/12329

在CRA教程中所写的内容似乎不起作用：https://create-react-app.dev/docs/adding-a-sass-stylesheet/

为了消除警告，我们必须完全删除SASS_PATH