3

I have installed Webpacker into my Rails app and am just trying to get it all configuring. All the images in my custom CSS are resolving correctly but i'm having trouble with Photoswipe.

Photoswipe is installed as a Node module. My main stylesheets.scss file starts off like:

@import "node_modules/susy/sass/susy";
@import "node_modules/include-media/dist/include-media";
@import "node_modules/sass-toolkit/stylesheets/toolkit";
@import "node_modules/bourbon/app/assets/stylesheets/bourbon";

@import "../src/stylesheets/base/variables";

@import "node_modules/photoswipe/src/css/main";
@import "node_modules/photoswipe/src/css/default-skin/default-skin";

My variables file has the following Photoswipe variables set at the top:

$pswp__show-hide-transition-duration: 333ms;
$pswp__controls-transition-duration: 333ms;
$pswp__background-color: #000;
$pswp__placeholder-color: #222;
$pswp__box-sizing-border-box: true; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 1500;
$pswp__assets-path: ''; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: #CCC; // "Image not loaded" text color
$pswp__include-minimal-style: true;

I've tried changing $pswp__assets-path to allsorts in the hope of fixing this but no matter what I try to do it cannot resolve it.

The error i'm getting is:

ERROR in ./app/webpacker/packs/stylesheets.scss Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './default-skin.png' in '/vagrant/app/webpacker/packs'

Anyone able to help me resolve this resolution issue?

I've tried practically every path I can think of and it still cannot locate the file. The image 100% exists too.

Where should I be referencing it from? The included scss file?, The scss entry point file, the scss file that actually references the image?

I've tried all three and am just getting frustrated with it now.

jnns
  • 5,148
  • 4
  • 47
  • 74
rctneil
  • 7,016
  • 10
  • 40
  • 83

1 Answers1

0

Webpack's sass-loader states the following in its README:

Problems with url(...)

Since Sass implementations don't provide url rewriting, all linked assets must be relative to the output.

  • If you pass the generated CSS on to the css-loader, all urls must be relative to the entry-file (e.g. main.scss).
  • If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.

You will be disrupted by this first issue. It is natural to expect relative references to be resolved against the .sass/.scss file in which they are specified (like in regular .css files). Thankfully there are a two solutions to this problem:

  • Add the missing url rewriting using the resolve-url-loader. Place it before sass-loader in the loader chain.
  • Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path.

PhotoSwipe thankfully also provides a way of specifying the asset path. The following worked in my case.

$pswp__assets-path: "../node_modules/photoswipe/src/css/default-skin/";
@import "~photoswipe/src/css/main";
@import "~photoswipe/src/css/default-skin/default-skin";
jnns
  • 5,148
  • 4
  • 47
  • 74