Correct way to import all assets from external library with Ember CLI

1
votes

I'm working on an Ember.js project and would like to leverage the Slick Carousel library. I've installed the library via Bower in my project folder, and am having difficulty with importing it into my project.

In my ember-cli-build.js, I've added import statements as follows:

app.import('bower_components/slick-carousel/slick/slick.css');
app.import('bower_components/slick-carousel/slick/slick-theme.css');
app.import('bower_components/slick-carousel/slick/slick.js');

The issue I am running into is that the rest of the required assets do not get built and included in the dist folder when I do a build (fonts, assets, etc.), leading to errors with missing fonts and assets that are present in the "bower_components/slick-carousel" folder, but not in the build of my actual Ember application.

Edit: It looks like Broccoli-Funnel was what I needed. The issue was resolved by specifying the source files from the 'bower_components' folder and pointing the relative path to the 'dist' folder in the ember-cli-build.js file.

As a note: The 'broccoli-static-compiler' plugin commonly referenced elsewhere as the solution is deprecated, with the use of 'broccoli-funnel' as the recommended plugin.

1
ember.jsember-cli

1 Answers

2
votes

Broccoli-funnel ended up being what I was looking for. By placing the following inside of ember-cli-build.js, the needed files would be placed in the correct directory during build: 

var Funnel = require('broccoli-funnel');
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', {
      srcDir: '/',
      include: ['**/*.*'],
      destDir: '/assets/fonts'
});
return app.toTree([requiredAssets]);