CSS 错误源映射信息在 URL() 声明中不可用（找到孤立 CR，尝试 removeCR 选项）答案

【问题标题】：CSS error source-map information is not available at URL() declaration (found orphan CR, try removeCR option)CSS 错误源映射信息在 URL() 声明中不可用（找到孤立 CR，尝试 removeCR 选项）
【发布时间】：2020-04-22 19:05:18
【问题描述】：

我在项目中执行 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)

【问题讨论】：

标签： webpack css-loader sass-loader postcss-loader resolve-url-loader

【解决方案1】：

这个问题可能有多种原因，我会给出3种可能的解决方案，请尝试所有的方法

尝试更新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
    }

然后重启你的应用

下一个解决方案是将行尾更改为 LF See screenshot below to know how it is done in VS Code
检查您的 CSS 文件，逐一注释它们并运行您的代码以查找存在错误的文件。检查所有导入语句以及 CSS 文件中的 Web 链接。

附：这是我的第一个答案，所以请放轻松：p 如需更多参考我写的内容，您也可以访问此链接 -> For more details you can also refer this link

【讨论】：

【解决方案2】：

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

简单的解决方案：

将所有 url(..) 更改为 scss 文件中的新 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 中手动声明所有加载器（从下到上，最先调用的是底部的）

【讨论】：

【解决方案3】：

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

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

.gitattributes 文件可能如下所示

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

添加

*.scss eol=lf

此设置强制 Git 在签入时将行尾规范化为 LF，并在文件签出时阻止转换为 CRLF。

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

【讨论】：

【解决方案4】：

转到 node_modules/resolve-url-loader/index.js
找到 removeCR 选项（在我的例子中是在第 53 行）
将其从“false”更改为“true”
重启应用

【讨论】：

它对我有用，在您进行更改后重新启动应用程序以查看更改

【解决方案5】：

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

【讨论】：

很有道理。
工作就像一个魅力

【解决方案6】：

尝试将 node_modules/resolve-url-loader/index.js 中的 engine: 'postcss' 更改为 engine: 'rework'，希望有所帮助。

【讨论】：

【解决方案7】：

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

【讨论】：

Windows 默认有 CRLF。默认情况下，Windows 中的编辑器也确实具有 CRLF。我认为这不是一个适当的解决方案。 CRLF、CR、LF 应该无关紧要。都是新线