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

[simoneb]

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

Links

• Repro url: https://github.com/simoneb/cra-3.4.0-sass-repro
• CircleCI build showing the build error: https://app.circleci.com/jobs/github/simoneb/cra-3.4.0-sass-repro/1

[imgnx]

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

[Nguyenvantu]

I'm getting a similar error but with css. I rename index.css to style.css and build again, error is gone.

[unrevised6419]

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

[unrevised6419]

I think this is a issue on loaders above resolve-url-loader which is sass-loader which uses node-sass which uses libsass

[AgainPsychoX]

We just need removeCR option to be added...

[AgainPsychoX]

Saving SCSS files with LF new lines mode helps, but it is only temporary solution :C

[NSarg1]

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

[unrevised6419]

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

[NSarg1]

@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,'.

[unrevised6419]

but problem solves when in "resolve-url-loader/index.js" file to change option from 'removeCR : false,' to 'removeCR : true,'.

Tried, but does not work. Maybe you changed something else?

[mxshahan]

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

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am getting this error? Why is that?

[mxshahan]

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

I tried this. But doesn't work

[Yellowhill]

Having the same problem on "react-scripts": "^3.4.1", "node-sass": "^4.14.0".

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