使用 Webpacker 和 Rails 导入 npm 包的图像答案

【问题标题】：Import images of an npm package with Webpacker and Rails使用 Webpacker 和 Rails 导入 npm 包的图像
【发布时间】：2020-03-02 19:24:45
【问题描述】：

我正在尝试使用yarn 和webpacker 安装包lightslider。

这是我到目前为止所做的：

yarn add lightslider

// app/webpacker/packs/application.js

require('lightslider');

// app/webpacker/src/application.scss

@import '~lightslider/dist/css/lightslider.min';

但是，由于以下错误，Webpack 编译失败：

Module not found: Error: Can't resolve '../img/controls.png'

这是lightslider正常工作所需的图片，位于node_modules/lightslider/dist/img/controls.png：

// node_modules/lightslider/dist/css/lightslider.css

.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url('../img/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}

如何在我的包中导入此图像以便 Lightslider 找到它？

【问题讨论】：

我没有尝试过lightslider，但我最近成功从jquery-ui-dist包中添加了jquery ui。看看以下是否有帮助 - stackoverflow.com/a/58580434/908842
请说明您使用的是什么版本的 Rails、webpackER 和 @rails/webpacker。

标签： ruby-on-rails npm webpack yarnpkg webpacker

【解决方案1】：

来自 WebpackER 文档：https://github.com/rails/webpacker/blob/76b491750993fada8b0b0cc2546dfcfbc4aaae13/docs/css.md#resolve-url-loader

由于 Sass/libsass 不提供 url 重写，所有链接的资产必须与输出相关。使用 resolve-url-loader 添加缺失的 url 重写。将其直接放在 loader 链中的 sass-loader 之后。

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

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

使用@rails/webpacker@4.0.7 和resolve-url-loader@3.1.0 在没有/使用上述修改的情况下，我能够重现/修复您描述的问题。

【讨论】：