CSS错误源映射信息在URL()声明中不可用（发现孤立的CR，请尝试使用removeCR选项）。

Question

当我在我的项目中执行NPM start时，我遇到了一个问题。我收到了这个错误消息：

./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

- ShalomBar

Answer 1

这个问题可能有多种原因，我将提供三个可能的解决方案，请尝试全部

1. 尝试更新node_modules\resolve-url-loader中的index.js。 在此处，在var options下面

var options = Object.assign({
      sourceMap: loader.sourceMap,
      engine: 'postcss',
      silent: false,
      absolute: false,
      keepQuery: false,
      **
      removeCR: false-- > make this "true" ** ,
      root: false,
      debug: false,
      join: joinFn.defaultJoin
    }

然后重新启动你的应用程序。

2. 下一个解决方案是将行尾序列更改为LF 查看下面的屏幕截图了解如何在VS Code中完成此操作

3. 逐个注释CSS文件并运行代码，以找到有错误的文件。检查所有导入语句以及CSS文件中的web链接。

P.S. 这是我的第一个答案，请多多包涵 :p 有关我写的更多参考资料，您还可以访问此链接-> 欲了解更多详细信息，也可以参考此链接

- Shreyansh Gupta

Answer 2

1. 进入 node_modules/resolve-url-loader/index.js
2. 查找 removeCR 选项（在我的情况下它位于第53行）
3. 将其从“false”更改为“true”
4. 重新启动您的应用程序

- Kritagya Khandelwal

---

它对我起作用了，在你进行更改后，重新启动应用程序以查看更改。 - Amaan Imtiyaz

在React中，此文件的位置为node_modules\react-scripts\node_modules\resolve-url-loader\index.js。 - Raja Nagendra Kumar

这是一个临时解决方案。 - Sahin

Answer 3

打开文件*.css，在IDE中选择行尾序列为LF（在我的情况下，我已经从CRLF更改为LF）。

- nayaganov

---

Windows默认使用CRLF作为换行符，Windows的文本编辑器也默认使用CRLF。但我认为这并不是一个合适的解决方案。换行符类型（CRLF、CR、LF）应该无关紧要，它们都代表着新的一行。 - Thanasis Ioannidis

Answer 4

在您的IDE（我使用的是Visual Studio Code）中，从“CRLF”切换到“LF”（或反之亦然）

- Artiom Shelegovich

---

很有道理。 - Cristian E.

但是如果我们有许多这样的文件怎么办？逐个更改是不可能的。 - Sahin

Answer 5

尝试将 node_modules/resolve-url-loader/index.js 中的 engine: 'postcss' 更改为 engine: 'rework'，希望能够帮到您。

- Xurify

Answer 6

我在这个问题上浪费了17小时和一个周末。

简单的解决方案：

在scss文件中将所有的url(..)更改为新的URL(...)。

更深入的解释：

Webpack 5希望使用新的URL(...)声明，但是由于某些原因，url在声明结尾处留下了CR。也可以通过扩展webpack配置并添加resolve-url-loader选项来解决，并将其设置为removeCR:true。

  {
//         loader: 'resolve-url-loader',
//         options: {
//           removeCR:true
//         }
//       }, 

请记住，当您使用以下方式针对整个scss文件时：

test: /\.(s*)css$/,

这将禁用内置的CSS支持，例如在Next.js中，您需要手动声明Webpack中的所有加载器（从底部到顶部，底部的第一个先被调用）。

- Mark O

---

将所有的url(...)更改为URL(...)，这个神奇地解决了我的问题。 - that_one_guy

这必须被选为答案。 - Sahin

我猜这与这个有关: https://webpack.js.org/blog/2020-10-10-webpack-5-release/#asset-modules - Sahin

Answer 7

对于仍然遇到此问题的任何人，我找到了一个永久解决方案。

您可以使用 .gitattributes 防止文件被转换为 CRLF。

.gitattributes 文件可以如下所示

*.vcproj    eol=crlf
*.sh        eol=lf

添加

*.scss eol=lf

这个设置强制Git在提交时将行尾标准化为LF，并防止在检出文件时转换为CRLF。

只需提交.gitattributes文件，您的文件就会在每个使用LF行尾的系统上被检出。

- synapze