question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Describe the bug

Just upgraded my React.js app to the new version of CRA (create-react-app 4.0.1), I ejected the project, and when I try to compile (npm start), 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');

Does anyone face this and have a fix? Thanks in advance!

Expected behavior

Run as before

Actual behavior

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' 

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7

github_iconTop GitHub Comments

13reactions
windingingcommented, Dec 9, 2020

same issue

1reaction
sureshUngaralacommented, Oct 31, 2021

@marko-hologram @import url() isn’t a wrong format. For media query usage, this is the format to import S(CSS) files unless the media query is used in the imported file. This @import url(...path) syntax seems to be failing to resolve in CRA v4.x.x

E.g: Importing scss files from a dir relative to src folder

@import url(“./styles/screens/desktops.scss”) only screen and (min-width: 1900px); @import url(“./styles/print.scss”) print;

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't resolve SCSS file after upgrade to create-react-app 4.0.1
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...
Read more >
Can't resolve SCSS file after upgrade to create-react-app 4.0.1 ...
Coding example for the question Can't resolve SCSS file after upgrade to create-react-app 4.0.1-Reactjs.
Read more >
Adding a Sass Stylesheet - Create React App
Now you can rename src/App.css to src/App.scss and update src/App.js to import src/App.scss . This file and any other file will be ...
Read more >
sass-loader - npm
Loads a Sass/SCSS file and compiles it to CSS. Getting Started. To begin, you'll need to install sass-loader : npm install sass-loader ...
Read more >
How to fix 'Module not found: Can't resolve 'http' in ... - YouTube
Basically, just change ' react -scripts' to 4.0.2 in your package.json and run `npm install` again :D Follow me on Twitter: ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found