Импорт изображений пакета npm с помощью Webpacker и Rails

Я пытаюсь установить пакет lightslider с yarn и webpacker.

Вот что я сделал до сих пор:

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'

это изображение, которое требуется для правильной работы lightlider, и находится в 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;
}

Как я могу импортировать это изображение в свой пакет, чтобы lightlider нашел его?


ruby-on-rails webpack npm yarnpkg webpacker
person Kernael    schedule 06.11.2019    source источник
comment
Я не пробовал lightlider, но недавно успешно добавил jquery ui из пакета jquery-ui-dist. Посмотрите, полезно ли следующее: stackoverflow.com/a/58580434/908842   -  person Kalman    schedule 06.11.2019
comment
Укажите, какие версии Rails, webpackER и @rails/webpacker вы используете.   -  person rossta    schedule 07.11.2019

Ответы (1)


arrow_upward
3
arrow_downward

Из документов WebpackER: https://github.com/rails/webpacker/blob/76b491750993fada8b0b0cc2546dfcfbc4aaae13/docs/css.md#resolve-url-loader

Поскольку Sass/libsass не обеспечивает перезапись URL-адресов, все связанные ресурсы должны быть связаны с выходными данными. Добавьте отсутствующую перезапись URL-адреса с помощью загрузчика resolve-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/[email protected] и [email protected].

person rossta    schedule 07.11.2019