使用Webpacker和Rails导入npm软件包的图像

2024-05-03 • 问答

我正在尝试使用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;
}

我如何将这个图像导入我的背包中，以便光标机可以找到它？

mm6yuz 回答：使用Webpacker和Rails导入npm软件包的图像

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

由于Sass / libsass不提供url重写，因此所有链接的资产必须相对于输出。使用resolve-url-loader添加缺少的url重写。将其直接放在加载程序链中的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,{
  loader: 'resolve-url-loader'
});

我可以使用@rails/webpacker@4.0.7和resolve-url-loader@3.1.0复制/修复您所描述的问题，而无需进行上述修改。

npm ruby-on-rails webpack webpacker yarnpkg

本文链接：https://www.f2er.com/3153114.html

使用Webpacker和Rails导入npm软件包的图像

mm6yuz 回答：使用Webpacker和Rails导入npm软件包的图像

大家都在问