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

Question

我刚刚将我的React.js应用程序升级到了新版本的CRA（create-react-app 4.0.1），当我尝试编译时，我的SCSS文件（尝试加载的第一个文件是animations.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
有人遇到过这个问题并且有解决方法吗？
提前致谢！

- Or Assayag

Answer 1

我整天都在尝试解决同样的错误。这里有一个关于此问题的Github问题:

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

简而言之，您有三个选项：

• 将公共文件夹中的所有内容移动到/src文件夹中，.scss文件将开始工作
• 降级到RCA 3.4.x
• 使用craco进行快速修复

使用craco进行快速修复

$ yarn add @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 中 scripts 部分中对 react-scripts 的现有调用：

/* 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

- starsky