Can't resolve SCSS file after upgrade to create-react-app 4.0.1

user_4442606 0
Viewed 1896

Just upgraded my React.js app to the new version of CRA (create-react-app 4.0.1), and when I try to compile, I got error on my SCSS files (the first file that try to be loaded is 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'

I also use the package: "node-sass": "^4.14.1"

My master.scss file:

@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');

In their GitHub page I cant find a working solution:
https://github.com/facebook/create-react-app/issues/9870
Does anyone face this and have a fix?
Thanks in advance!

create-react-app reactjs sass
1 Answers

So I spent all day trying to solve same error. Here's an issue on github on this:

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

To make it short you have 3 options:

  • Move everything from public folder to /src folder and .scsses will start working
  • Downgrade to RCA 3.4.x
  • Quick fix using craco

Quick fix with craco

$ yarn add @craco/craco

or

$ npm install @craco/craco --save

create a .cracorc file next to package.json in your project

Turn off processing of url() rules by inserting this snippet into .cracorc

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

Update the existing calls to react-scripts in scripts seciotn of package.json:

/* package.json */

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

And it should work, for more on craco installation read here:

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

user_84444750
Related