Using images inside node_modules

[silva96]

Context:

Using Propshaft, cssbundling-rails, jsbundling-rails, esbuild

I'm using a npm plugin that has a css like this:

// node_modules/the_module/build/css/styles.css

.some-div {
  background: url('../img/icon.png')
}

the background refers to

node_modules/the_module/build/img/icon.png

In my application.scss I have

@import 'the_module/build/css/styles';

The css file gets included in my precompiled application.css but it tries to find an image in localhost:3000/img/icon.png which of course does not exist.

How can I make that image available under assets?

[mikej]

Hi @silva96 👋🏻 Did you ever manage to find a solution to this?

I’ve been running into the same issue trying to use flag-icons on a project (which includes SVG images that install under node_modules).

[silva96]

@mikej nope, I wanted to ship the feature so I copied the files in my asset folder.

I was using the intl-tel-input js package, that adds flags to the left of an input where you fill your phone number, depending on the country area code.

[silva96]

I also added this issue in propshaft, I'm not sure where it has to be solved actually

https://github.com/rails/propshaft/issues/135

[scottysmalls]

So i had a similar issue with scss instead of css. My solution was solved by adding to the asset pipeline and adjusting some scss variables. A css solution might be similar. My plugin in question was stimulus-lightbox.

Using leads from rails/propshaft/issues/47

1. I updated assets.rb to include the node_module root: Rails.application.config.assets.paths << Rails.root.join("node_modules", "lightgallery")
2. I updated my application.scss file to change the variable paths used (before the import)

   $lg-path-images: "./images";
   $lg-path-fonts: "./fonts";

Hope this helps