Roots Discourse

Adding library with Bower is breaking Google fonts


#1

I have added Owl Carousel with Bower but for some reason it has broken Google fonts. I expect this is something to do with it adding the Owl Carousel css to the top of my main.css file once compiled - before Bootstrap and my Google font imports.

So I assume (correct me if I am wrong) that I need to change the order in which bower compiles the scripts, or load Owl Carousel as a separate file. I have installed it with Bower and it is in the bower_components dir. The bower.json file looks like this:

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta", "popper.js": "^1.12.3", "owl.carousel": "^2.2.1" }, "overrides": { "owl.carousel": { "main": [ "dist/owl.carousel.js", "dist/assets/owl.carousel.css", "dist/assets/owl.theme.default.css" ] } } }

And manifest.json looks like this:

{ "dependencies": { "main.js": { "files": [ "scripts/main.js" ], "main": true }, "main.css": { "files": [ "styles/main.scss" ], "main": true }, "customizer.js": { "files": [ "scripts/customizer.js" ] }, "jquery.js": { "bower": ["jquery"] }, "owl.carousel": { "bower": ["owl.carousel"] } }, "config": { "devUrl": "http://dev.com/" } }

So I have set the overrides in bower.json and call it in manifest.json yet none of the Google fonts work. No errors in console. I’m completely stumped on this one. How can I get this to work?