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