Package Installed Via Bower Is Messing Up My main.css File

sage
#1

I am trying to use Owl Carousel with Sage. I’ve installed Owl Carousel using Bower like so:

bower install --save owl-carousel

Since the Owl Carousel Bower package does not come with a “main” section in it’s bower.json file I added Owl Carousel to the “overrides” in the global bower.json file like so:

"overrides": {
    "bootstrap-sass": {
        "main": [
            "./assets/stylesheets/_bootstrap.scss",
            "./assets/javascripts/bootstrap/transition.js",
            "./assets/javascripts/bootstrap/alert.js",
            "./assets/javascripts/bootstrap/button.js",
            "./assets/javascripts/bootstrap/carousel.js",
            "./assets/javascripts/bootstrap/collapse.js",
            "./assets/javascripts/bootstrap/dropdown.js",
            "./assets/javascripts/bootstrap/modal.js",
            "./assets/javascripts/bootstrap/tooltip.js",
            "./assets/javascripts/bootstrap/popover.js",
            "./assets/javascripts/bootstrap/scrollspy.js",
            "./assets/javascripts/bootstrap/tab.js",
            "./assets/javascripts/bootstrap/affix.js",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
        ]
    },
    "OwlCarousel": {
        "main": [
            "./owl-carousel/owl.carousel.js",
            "./owl-carousel/owl.carousel.css",
            "./owl-carousel/owl.theme.css",
            "./owl-carousel/owl.transitions.css"
       ]
   }
}

Then I added OwlCarousel to the manifest.json file like so:

{
    "dependencies": {
        "main.js": {
            "files": [
                "scripts/main.js"
            ],
            "bower": [
                "OwlCarousel"
            ],
            "main": true
        },
        "main.css": {
            "files": [
                "styles/main.scss"
            ],
            "bower": [
                "OwlCarousel"
            ],
            "main": true
        },
        "customizer.js": {
            "files": [
                "scripts/customizer.js"
            ]
        },
        "jquery.js": {
            "bower": ["jquery"]
        }
    },
    "config": {
        "devUrl": "http://pivot.local"
    }
}

Then I ran gulp to compile everything, but the issue is that the CSS from the owl.carousel.css file gets written at the top of the main.css file, which is messing with some of my site CSS. This is what the top of the main.css output looks like:

@charset "UTF-8";.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translateZ(0)}.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel .owl-item{float:left}.owl-controls .owl-buttons div,.owl-controls .owl-page{cursor:pointer}.owl-controls{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grabbing{cursor:url(grabbing.png) 8 8,move}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0)}.owl-theme .owl-controls{margin-top:10px;text-align:center}.owl-theme .owl-controls .owl-buttons div{color:#fff;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5}.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline}.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;border-radius:20px;background:#869791}.owl-theme .owl-controls.clickable .owl-page:hover span,.owl-theme .owl-controls .owl-page.active span{filter:Alpha(Opacity=100);opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#fff;padding:2px 10px;font-size:12px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) no-repeat 50%}.owl-origin{-webkit-perspective-origin-x:50%;-webkit-perspective-origin-y:50%;-moz-perspective:1200px;-moz-perspective-origin-x:50%;-moz-perspective-origin-y:50%;-webkit-perspective:1200px;perspective:1200px}.owl-fade-out{z-index:10;-webkit-animation:fadeOut .7s both ease;animation:fadeOut .7s both ease}.owl-fade-in{-webkit-animation:fadeIn .7s both ease;animation:fadeIn .7s both ease}.owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease}.owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease}.owl-goDown-out{-webkit-animation:scaleToFade .7s ease both;animation:scaleToFade .7s ease both}.owl-goDown-in{-webkit-animation:goDown .6s ease both;animation:goDown .6s ease both}.owl-fadeUp-in{-webkit-animation:scaleUpFrom .5s ease both;animation:scaleUpFrom .5s ease both}.owl-fadeUp-out{-webkit-animation:scaleUpTo .5s ease both;animation:scaleUpTo .5s ease both}@-webkit-keyframes empty{0%{opacity:1}}@keyframes empty{0%{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes backSlideOut{25%{opacity:.5;-webkit-transform:translateZ(-500px)}75%,to{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}}@keyframes backSlideOut{25%{opacity:.5;-webkit-transform:translateZ(-500px);transform:translateZ(-500px)}75%,to{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%);transform:translateZ(-500px) translateX(-200%)}}@-webkit-keyframes backSlideIn{0%,25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-webkit-transform:translateZ(-500px)}to{opacity:1;-webkit-transform:translateZ(0) translateX(0)}}@keyframes backSlideIn{0%,25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%);transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-webkit-transform:translateZ(-500px);transform:translateZ(-500px)}to{opacity:1;-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0)}}@-webkit-keyframes scaleToFade{to{opacity:0;-webkit-transform:scale(.8)}}@keyframes scaleToFade{to{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}}@-webkit-keyframes goDown{0%{-webkit-transform:translateY(-100%)}}@keyframes goDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes scaleUpFrom{0%{opacity:0;-webkit-transform:scale(1.5)}}@keyframes scaleUpFrom{0%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes scaleUpTo{to{opacity:0;-webkit-transform:scale(1.5)}}@keyframes scaleUpTo{to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */@import url(https://fonts.googleapis.com/css?family=Oswald:400,700|Lato:400,900);html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

Does anyone have a sense of what I’m doing wrong?

#2

Yes it does? https://github.com/smashingboxes/OwlCarousel2/blob/develop/bower.json

Even if it hasn’t, your override isn’t correct. The override name should match the bower package name and you don’t need to include the package folder path:

"owl.carousel": {
   "main": [
      "./dist/owl.carousel.js",
      "./dist/assets/owl.theme.default.css",
      "./dist/assets/owl.theme.green.css"
   ]
}

Also you don’t need to add it to your manifest.json?
It will get compiled automatically since it’s already added to your styles/main.scss by wiredep.

#3

Yes it does? https://github.com/smashingboxes/OwlCarousel2/blob/develop/bower.json1

The package that you linked to is for Owl Carousel 2, which is still in development, I was looking to use the original Owl Carousel for now.

Otherwise, thank you for the additional information about the override naming and automatic compiling via wiredep.

#4

Ah my bad, didn’t realise you meant version 1!

#5

I’m having the same problem but with the owl.carousel package. How can I adjust where it gets added to main.css? Mine’s also adding at the top which throws off a Google Font @import in _global.scss.

1 Like
#6

Did you manage to resolve this? I’m having the same trouble.

1 Like