时间戳

首页 > 解决方案 > 升级到 create-react-app 4.0.1 后无法解析 SCSS 文件

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

问题描述

刚刚将我的 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 有人面对这个问题并有解决办法吗？
提前致谢！

标签： reactjssasscreate-react-app

解决方案

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

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

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

  • 将所有内容从公用文件夹移动到 /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 中更新对 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

推荐阅读