Adding Bower Files to Sage (8.0.0)

sage
5

So, maybe I just need a few steps to help me out. Here’s a quick run down of the steps to add a bower dependency. Let me know if I’m doing anything wrong here. For my example I’m going to use Chart.js.

  1. Add package to bower.json
  2. Declare which files you need from that package in "overrides": and create a handle.
  3. Add that handle to manifest.json.

Is that it?

{
    "name": "sage",
    "homepage": "http://roots.io/sage/",
    "authors": [
        "Ben Word <ben@benword.com>"
    ],
    "license": "MIT",
    "private": true,
    "dependencies": {
        "modernizr": "2.8.2",
        "jquery": "1.11.2",
        "bootstrap": "3.3.1",
        "chart.js": "1.0.1"
    },
    "overrides": {
        "modernizr": {
            "main": "./modernizr.js"
        },
        "bootstrap": {
            "main": [
                "./less/bootstrap.less",
                "./js/transition.js",
                "./js/alert.js",
                "./js/button.js",
                "./js/carousel.js",
                "./js/collapse.js",
                "./js/dropdown.js",
                "./js/modal.js",
                "./js/tooltip.js",
                "./js/popover.js",
                "./js/scrollspy.js",
                "./js/tab.js",
                "./js/affix.js",
                "./fonts/glyphicons-halflings-regular.eot",
                "./fonts/glyphicons-halflings-regular.svg",
                "./fonts/glyphicons-halflings-regular.ttf",
                "./fonts/glyphicons-halflings-regular.woff"
            ]
        },
        "bootstrap-sass-official": {
            "main": [
                "./assets/stylesheets/_bootstrap.scss",
                "./assets/javascripts/transition.js",
                "./assets/javascripts/alert.js",
                "./assets/javascripts/button.js",
                "./assets/javascripts/carousel.js",
                "./assets/javascripts/collapse.js",
                "./assets/javascripts/dropdown.js",
                "./assets/javascripts/modal.js",
                "./assets/javascripts/tooltip.js",
                "./assets/javascripts/popover.js",
                "./assets/javascripts/scrollspy.js",
                "./assets/javascripts/tab.js",
                "./assets/javascripts/affix.js",
                "./assets/fonts/glyphicons-halflings-regular.eot",
                "./assets/fonts/glyphicons-halflings-regular.svg",
                "./assets/fonts/glyphicons-halflings-regular.ttf",
                "./assets/fonts/glyphicons-halflings-regular.woff"
            ]
        },
        "chart.js": {
            "main": "./chart.js"
        }
    }
}

{
    "dependencies": {
        "main.js": {
            "files": [
                "scripts/**/*",
                "scripts/main.js"
            ],
            "main": true
        },
        "main.css": {
            "files": [
                "styles/main.less"
            ],
            "main": true
        },
        "editor-style.css": {
            "files": [
                "styles/editor-style.less"
            ]
        },
        "jquery.js": {
            "bower": ["jquery"]
        },
        "modernizr.js": {
            "bower": ["modernizr"]
        },
        "chart.js": {
            "bower": ["chart.js"]
        }
    }
}
1 Like