19

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

在此处输入图像描述

4

7 回答 7

18

There can be multiple reasons for this problem, I will give 3 possible solutions please try all of them

  1. try updating the index.js present in node_modules\resolve-url-loader. So here under the 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
    }

then restart your app

  1. Next solution is to change end of line sequence to LF See screenshot below to know how it is done in VS Code

  2. Check Your CSS files by commenting them one by one and running your code to find the file with the bug. Check all import statements and also the web links in your CSS file.

P.S. This is my first answer so please go easy on me :p for more reference to what I wrote you can also visit this link -> For more details you can also refer this link

于 2020-10-07T15:28:56.373 回答
13

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

于 2020-02-17T05:02:43.977 回答
11
  1. 转到 node_modules/resolve-url-loader/index.js
  2. 找到 removeCR 选项（在我的情况下，它位于第 53 行）
  3. 将其从“假”更改为“真”
  4. 重启你的应用
于 2021-02-01T06:29:14.707 回答
8

在 IDE 中从“CRLF”切换到“LF”（反之亦然）（在我的情况下为 Visual Studio Code）

在此处输入图像描述

在此处输入图像描述

于 2020-12-01T17:12:21.370 回答
4

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

于 2020-10-12T04:02:33.763 回答
0

我刚刚在这个问题上失去了 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 中的所有加载器（从下到上，最先调用的是底部的）

于 2021-08-14T21:44:12.697 回答
0

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

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

.gitattributes 文件可能如下所示

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

添加

*.scss eol=lf

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

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

于 2021-04-01T03:09:53.197 回答