Install Bower components into two different directories?

When using CSS and JS components, is it possible, or even, does it make sense to install them to different directories?

|-- app
    |-- scripts
        |-- components           # js components go here
            |-- backbone-amd
            |-- etc
    |-- styles
        |-- modules
        |-- partials
        |-- components           # sass components go here
            |-- normalize.scss
            |-- etc

What's the most efficient way to structure a project organized as such? Is there a good Grunt task to accomplish the goal of integrating bower installed sass components for a development environment?



Bower needs to keep track of every component you install. That would be very hard if they were split up in multiple locations. For Sass development, just put the components folder in the Sass search path.

There are grunt tasks that can assist you in splitting it up if you insist on doing that:

(though not recommended)


There is a node package called bower-installer that provides a single command for managing alternate install paths.

run npm install -g bower-installer

Set up your bower.json

  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  "install" : {
    "path" : {
      "css": "src/css",
      "js": "src/js"
    "sources" : {
      "jquery-ui" : [

Then run bower-installer command.

This will install components/jquery-ui/themes/start/jquery-ui.css to ./src/css, etc


Maybe You can have .bowerrc files in different directories, where you can config "directory" key to point to bower components directory.

But you will need to cd to correct directory before bower install whatever:



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.