Why are some components not included in "dist"

sage
1

Hi we’re just starting with bower embedding git projects and now i’m wondering what i can do when a project fails to be included in the main.js and other folders in the “dist folder”.

For example i tried to import font awesome with bower: no problems whatsoever, all css and fonts are nicely added to the dist folder.

When i try to add owl.carousel, everything is added to the bower_components, but when i gulp, nothing is added to the dist folder.

I’m guessing this has maybe something to do with the .bower.json or the bower.json files but i can’t tell the difference in deployment as the packages above mainly seem to have similar files.

2

Check owl.carousel’s repo for a “main” definition in its bower.json. If it’s not there then you’ll need to define the main files yourself. Check the below for more:

1 Like
3

there is a “main” in its bower.json:

  "name": "owl.carousel",
  "version": "2.0.0-beta.2.4",
  "main": [
    "./dist/"
  ],

In the “owl.carousel/dist” folder there are a normal and a min.js file and an assets folder, none of which are imported.

4

They shouldn’t be defining a folder as the main. You’ll have to override in the project’s bower.json until they sort it out. Add this to the other overrides.

    "owl.carousel": {
      "main": [
        "./dist/owl.carousel.js"
        ]
    }
1 Like
5

Okay, thanks,

That works for the .js file, but how to pull the image files into the project? there is a dependency on 2 image files which are located in the src folders, i’ve made the main override like so:

"owl.carousel": {
  "main": [
    "./src/js/*",
    "./src/css/*",        
    "./src/images/ajax-loader.gif"        
    ]
},

That works fine now for both the js and css file, but the images are not being imported…
I noticed something similar with fancy box whih would not import completely either. Do we need to do something special with images?

6

asset-builder currently supports CSS, JS, and fonts. You’ll have to manually copy over images to your assets/images/ directory, and make sure that the CSS references the correct path.

You can either override the CSS in your theme CSS for the correct images path on the rule(s), or remove the Bower package’s CSS from the pipeline and include it all manually in your theme CSS.

1 Like