Missing image or font files for bower packages

sage
1

Hello,

I have missing image or font files when installing bower packages. One example is select 2:

In it`s bower.json, there is the following:

"main": ["select2.js", "select2.css", "select2.png", "select2x2.png", "select2-spinner.gif"]

So select2.js is compiled to my dist/scripts/main.js, main.css to dist/styles/main.css file and the images are copied to dist/images/.

But in the select2.css file, e.g. select2.png is included with:

background: #fff url('select2.png') no-repeat 100% -22px;

So I get the error:

GET http://localhost:3000/app/themes/my-theme/dist/styles/select2.png 404 (Not Found)

What is a best practise way of handling those things? Is it possible to tell gulp where to copy the images files for specific bower packages?

2

I bumped into something similar, easiest way I think is to override the style declaration in your own SASS/CSS file:

3

Thank you. This is possible, but the problem is, that the select2.png and other image files are referenced 20-30 times or so in the select2 css. So it would be a big efford and ugly to hack the problem like this.

4

I wanted to see if select2 had any preprocessor files, but their latest release doesn’t contain any images: https://github.com/select2/select2

So I’m not sure which version you’re on. However, if they DO have LESS or SCSS files, I would use those and hopefully they have a variable override for image URL’s.

If not, that “big effort and ugly hack” is your last resort, as automatic URL updating is not something that’s built in to the Sage gulpfile, the hope is that you can use css preprocessor files

1 Like
5

Exactly what kalen suggests, in that case you’ll only need to override 1 variable

6

In my case I wrote a gulp task to copy an image file I needed to the /dist/styles/ folder (which is not how it should be, but I didn’t want to hack bower stylesheets either…)

  • Install mosaic-gulp-task-copy: npm install --save mosaic-gulp-task-copy

  • Edit gulpfile.js and add this to the list of requirements at the top:var copy = require("mosaic-gulp-task-copy");

  • Add this task somewhere in the file (change the src and dest variables to suit your needs and don’t use **/* unless you want the entire bower folder crawled)

// Copy vendor files from bower components to the public folder 
gulp.task("copy", copy([
  {
    src: "bower_components/fotorama/**/*.png",
    dest: "dist/styles"
  },
  {
    src: "bower_components/other/stuff/I/need/**/*.jpg",
    dest: "dist/styles"
  }
]));
  • Add the task to the build chain
gulp.task('build', function(callback) {
  runSequence('styles',
    'scripts', ['fonts', 'images', 'copy'],
    callback);
});
  • Run gulp build and you should see your copy task working: [05:50:22] Starting 'copy'... and check your destination folder, what you need should be in there.

Docs: https://www.npmjs.com/package/mosaic-gulp-task-copy

EDIT: updated the dest references to specify directory paths, since I couldn’t get fancy with the pipe command

2 Likes