Webpacker 无法解析 CSS 中的图像路径答案

【问题标题】：Webpacker can't resolve image paths in CSSWebpacker 无法解析 CSS 中的图像路径
【发布时间】：2018-11-01 00:55:10
【问题描述】：

在一个 Rails 项目中，我添加了 Webpacker 和一个名为 fancybox 的节点模块。

fancybox 模块 css 文件引用了像“../img/blank.gif”这样的图像

将模块 CSS 文件导入我的包后，我现在看到错误：“模块构建失败：ModuleNotFoundError: Module not found: Error: Can't resolve '../img/blank.gif' in .... "

我需要对 webpacker 进行哪些更改才能解析这些图像路径？

config/webpack/environment.js 供参考：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    'window.Tether': 'tether',
    Popper: ['popper.js', 'default'],
  })
)
// yarn add expose-loader -D
environment.loaders.append('expose',{
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$',
  },
  {
    loader: 'expose-loader',
    options: 'jquery',
  }],
})

module.exports = environment

【问题讨论】：

标签： ruby-on-rails webpack

【解决方案1】：

通过删除 fancybox 2 并添加 fancybox 3（我真正想要的版本）解决了这个问题

yarn remove fancybox
yarn add @fancyapps/fancybox

感谢这个答案： How to use fancybox with webpack?

【讨论】：