Can't resolve SCSS file after upgrade to create-react-app 4.0.1
See original GitHub issueDescribe 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:
- Created 3 years ago
- Comments:7
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
same issue
@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.xE.g: Importing scss files from a dir relative to
src
folder