升级到 create-react-app 4.0.1 后无法解析 SCSS 文件

Question

刚刚将我的 React.js 应用程序升级到新版本的 CRA (create-react-app 4.0.1)，当我尝试编译时，我的 SCSS 文件出现错误（尝试加载的第一个文件是动画。 scss）：

Failed to compile.

./src/assert/css/master.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/assert/css/master.scss)
Error: Can't resolve './animations.scss' in 'C:\Or\Web\project\project\src\assert\css' 

我还使用该包：“node-sass”：“^4.14.1”

我的 master.scss 文件：

@import url('./all.css');
@import url('./animations.scss');
@import url('./big-flag.scss');
@import url('./coat.scss');
@import url('./flags16-both.scss');
@import url('./flags16-extra.scss');
@import url('./flags32-both.scss');
@import url('./flags32-extra.scss');
@import url('./locations.scss');
@import url('./index.scss');
 

在他们的 GitHub 页面中，我找不到可行的解决方案：
https://github.com/facebook/create-react-app/issues/9870
有人遇到这个问题并有解决办法吗？
提前致谢！

Answer 1

所以我花了一整天的时间试图解决同样的错误。github上有一个关于这个问题的问题：

https://github.com/facebook/create-react-app/issues/9937

简而言之，您有 3 个选择：

• 将所有内容从 public 文件夹移至 /src 文件夹，.scsses 将开始工作
• 降级到 RCA 3.4.x
• 使用 craco 快速修复

使用 craco 快速修复

$ 纱线添加@craco/craco

或者

$ npm install @craco/craco --save

在项目中的 package.json 旁边创建一个 .cracorc 文件

通过将此代码片段插入 .cracorc 来关闭 url() 规则的处理

"module.exports ="{
   "reactScriptsVersion":"react-scripts",
   "style":{
      "css":{
         "loaderOptions":"() =>"{
            "return"{
               "url":false
            }
         }
      }
   }
}

更新 package.json 的脚本 seciotn 中对反应脚本的现有调用：

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

它应该可以工作，有关 craco 安装的更多信息请阅读此处：

https://github.com/gsoft-inc/craco/tree/master/packages/craco#installation