Bower broke Wiredep, and how to fix it….

Well, in reality Bower did not intentionally break Wiredep. A few weeks ago Bower published a standard for the use of the bower.json file. In the “main” section of the bower.json file, bower states

  • Use source files with module exports and imports over pre-built distribution files.
  • Do not include minified files.
  • Do not include assets files like images, fonts, audio, or video
  • Filenames should not be versioned (Bad: package.1.1.0.js; Good: package.js).
  • Globs like js/*.js are not allowed.

So, in this case, the preference for items listed in “main” would be the less or sass files and not the actual css files. Sounds great in theory. But not as awesome in reality.

In version 3.3.5 of bootstrap, they have implemented this suggestion by dropping the “dist/css/bootstrap.css” from the main section of their bower.son file.

That on its own is great, Bootstrap is conforming to the suggested standard set by Bower. Except for one thing…

Wiredep is this awesome tool that automatically injects css and js files into your views based on your bower.json file. So if you include Bootstrap, it will look in the “main” section of bootstrap’s bower.son file and pull the css and js files and add them to your view. Except now that css file is gone…

But not all is lost. Wiredep allows you to override those sections in your own bower.json file using the “overrides” section. So if you are trying to upgrade to 3.3.5 of bootstrap or 4.4.0 of font-awesome, you can add this code to your bower.json file and all will be well again…

“overrides”: {
        “bootstrap”: {
            “main”: [
                “dist/js/bootstrap.js”,
                “dist/css/bootstrap.css”,
                “less/bootstrap.less”
            ]
        },
        “font-awesome”: {
            “main”: [
                “less/font-awesome.less”,
                “css/font-awesome.min.css”,
                “scss/font-awesome.scss”
            ]
        }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *