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

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

About this issue

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

Commits related to this issue

Fixed issue where resolve-url-loader would not work on Windows. Fixed issue where resolve-url-loader would not work on Windows. This fixes #8596 — committed to lfshr/create-react-app by lfshr 3 years ago

Most upvoted comments

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

+18

iamandrewluca on Mar 4, 2020

I was encountered a similar error, but in my case, I used @apply with some bracket notation rules provided by tailwindcss. I solved it by just moving all rules containing bracket, right after @apply decorator. for example

p {
  @apply text-[10px] text-white;
}

alcoffeeocha on Sep 16, 2022

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… 🤔

halshing on Aug 28, 2020

I’m getting a similar error when using url().

Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

react-scripts version: 3.3

internationalhouseofdonald on Mar 3, 2020

@Yellowhill and @shahan953 :n issues seem to be related to line endings as seen in https://www.npmjs.com/package/resolve-url-loader#windows-line-breaks

You could try converting your line-endings to LF from CLRF.

Not sure if removeCR: true has any negative side effects or if it should be added (or if it helps with this at all)

petetnt on May 5, 2020

We just need removeCR option to be added…

AgainPsychoX on Mar 5, 2020

@Yellowhill and @shahan953 :n issues seem to be related to line endings as seen in https://www.npmjs.com/package/resolve-url-loader#windows-line-breaks

You could try converting your line-endings to LF from CLRF.

This ended up being the solution after all - thanks! I tried this at first by changing the line endings setting in VS Code preferences, but that did not help. I actually had to open each .scss-file individually, change the line-ending setting for the file and then save the file again.

Edit: Also going into node_modules\react-scripts\config.js and adding “removeCR : true,” into loader: require.resolve(‘resolve-url-loader’) options helped.

Yellowhill on May 27, 2020

@NSarg7 Dear developer can you please help fix this issue? 🙂 It seems this is not a CRA issue.

I don’t know exactly where is problem, but problem solves when in “resolve-url-loader/index.js” file to change option from ‘removeCR : false,’ to ‘removeCR : true,’.

NSarg1 on Mar 24, 2020

Dear developers, please solve this issue, it really interfere.