Bootstrap转React项目报错：无法解析jquery-ui相关图片资源求助

这个错误其实很好理解——你的jquery-ui.min.css里引用的图标图片在当前路径下找不到了。

问题根源 #

在传统的Bootstrap静态项目里，CSS文件和images文件夹通常是同级放置的，所以CSS里用./images/ui-icons_444444_256x240.png这种相对路径能正常定位到图片。但React项目是基于webpack打包的，它对静态资源的查找规则和静态项目不一样，默认情况下，webpack会按照配置的规则解析文件路径，一旦路径不对或者文件缺失，就会抛出这个Module not found错误。

具体解决方案 #

这里给你几个可行的解决办法，按操作难度从易到难排序：

• 直接复制图标文件到对应目录
  先去你的node_modules/jquery-ui/dist/目录下找到images文件夹，里面就是jquery-ui需要的所有图标文件。把这个images文件夹整个复制到src/css目录下，这样CSS里的相对路径./images/xxx.png就能正确找到文件了，这是最直接快速的方法。

• 修改CSS中的图片引用路径
  如果你不想复制文件，可以直接修改jquery-ui.min.css里的图片路径，让它指向node_modules里的原始文件。比如把./images/ui-icons_444444_256x240.png改成../node_modules/jquery-ui/dist/images/ui-icons_444444_256x240.png（注意根据你的项目目录结构调整相对层级）。不过因为是压缩后的CSS，修改起来可能有点麻烦，你可以改用未压缩的jquery-ui.css来修改，之后再根据需要压缩。

• 配置webpack别名（进阶）
  如果你经常需要处理这类第三方资源路径问题，可以在webpack配置里给jquery-ui的图片目录加个别名。打开你的webpack.config.js（如果是Create React App创建的项目，需要先执行npm run eject暴露配置），在resolve.alias里添加：

  resolve: {
    alias: {
      'jquery-ui-images': path.resolve(__dirname, 'node_modules/jquery-ui/dist/images')
    }
  }
  

  然后把CSS里的图片路径改成~jquery-ui-images/ui-icons_444444_256x240.png（前面的~是webpack识别别名的标记），这样webpack就能自动找到对应的文件了。

• 改用CDN引入jquery-ui
  彻底绕开本地资源的问题——直接在public/index.html里用CDN引入jquery-ui的CSS文件：

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  

  这样CDN会自动处理图片的加载，你就不用在本地引入jquery-ui.min.css了，自然也不会有路径错误。

内容的提问来源于stack exchange，提问作者Mohammed Fallah