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.

[react-scripts 3.4.0] SCSS file with import statement cause resolve-url-loader: CSS error

See original GitHub issue

Describe the bug

After upgrading from react-scripts 3.2.0 to 3.4.0 in a project which imports a simple SCSS file with an @import statement, running yarn build consistently fails with:

$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/index.scss
Error: resolve-url-loader: CSS error
  Invalid mapping: {"generated":{"line":1,"column":63},"source":"file:///home/circleci/project/src/index.scss","original":{"column":null},"name":null}

Steps to reproduce

Here’s a very simple repro created by:

npx create-react-app
yarn add node-sass
create a index.scss file containing @import url("https://fonts.googleapis.com/css?family=Open+Sans");
import index.scss from App.js

Issue Analytics

State:
Created 4 years ago
Reactions:12
Comments:21 (5 by maintainers)

Top GitHub Comments

17reactions

iamandrewlucacommented, Mar 4, 2020

Hmm, strange. I changed this

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

to this (without quotes)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

and it worked

4reactions

halshingcommented, Aug 28, 2020

Hmm, strange. I changed this
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
to this (without quotes)
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
and it worked

Just encountered the error and this worked for me. weird… 🤔

Top Results From Across the Web

Node Error: resolve-url-loader: CSS error - Stack Overflow

I had this same error. To fix this, I had to navigate to. node_modules/resolve-url-loader. open. index.js. and under var options change ...

React Js Css Loader Gives An Failed To Compile Issue - ADocLib

Ask questions[reactscripts 3.4.0] SCSS file with import statement cause resolveurlloader: CSS error. ! Please note that your issue will be fixed much.

Error node-sass version 5 0 0 is incompatible with 4 0 0

scss file to the App component I am getting this error: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5 ...

Create-react-app my-app takes 1.5 - 2 hours. Why?

This package will no longer receive updates. warning react-scripts > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+ ...

react-scripts | Yarn - Package Manager

Create React App 5.0.1 is a maintenance release that improves compatibility with React 18. We've also updated our templates to use createRoot and...