react17中打包时solve-url-loader: CSS error source-map information is not available。。。

第一次在使用react17技术栈，在打包过程中项目无法打包，按照报错内容，我们可以很清晰的把问题定位在样式解析上。

在这个项目中，我使用的是css的预编译器sass/scss

先说解决办法

1，找到node_modules/resolve-url-loader中的index.js文件
2，在编辑器中打开index.js
3,将options中的removeCR改成true

 var options = Object.assign(
    {
      sourceMap: loader.sourceMap,
      engine   : 'postcss',
      silent   : false,
      absolute : false,
      keepQuery: false,
      removeCR : true,
      root     : false,
      debug    : false,
      join     : joinFn.defaultJoin
    },
    !!loader.options && loader.options[camelcase(PACKAGE_NAME)],
    loaderUtils.getOptions(loader)
  );

打包成功，打开项目打包好的build中的index.html，项目正常。

相关扩展：
当出现这个问题时，百思不得姐，那我们按照错误提示一步步来看；

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

错误提示，源映射信息在url()声明中不可用（找到孤行删除，或者尝试更改一下removeCR配置）；
我只能去resolve-url-loader官网找removeCR的说明；

这个方法的作用是将孤行转换成空格。

我直接去node_modules配置中找到相关resolve-url-loader的相关配置，将原本默认为false的removeCR改成了文档推荐的true。然后再打包。。。这个时候项目依旧可以正常打包了

but？？？到底是哪里出了问题，我默默地删除了我scss文件中的空白行，想尝试一下是否会是这个原因导致（虽然我内心压根不相信会是这样）。果然，跟空行半毛钱关系没有。

这个时候我看着错误提示，source-map information is not available at url() declaration。心中开始怀疑是不是因为图片路径的问题

于是我将相关背景图地址代码注释：
此时能正常打包，原因已经找到，静态文件引用之后编译异常了！！！

解决思路：关于需引用静态文件的样式，单独放css文件中，不放scss文件里。这样我们也不需要去更改node_modules中的resolve-url-loader配置了。

这是我所遇到react17开发过程中部分bug，执笔以记录！希望能帮到各位小伙伴