【问题标题】: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种可能的解决方案,请尝试所有的方法

    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
        }

    然后重启你的应用

    1. 下一个解决方案是将行尾更改为 LF See screenshot below to know how it is done in VS Code

    2. 检查您的 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】:
          1. 转到 node_modules/resolve-url-loader/index.js
          2. 找到 removeCR 选项(在我的例子中是在第 53 行)
          3. 将其从“false”更改为“true”
          4. 重启应用

          【讨论】:

          • 它对我有用,在您进行更改后重新启动应用程序以查看更改
          【解决方案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 应该无关紧要。都是新线
            猜你喜欢
            • 2020-07-31
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-01-21
            • 2014-02-14
            • 2013-03-03
            • 2021-05-16
            • 1970-01-01
            相关资源
            最近更新 更多