bower add Jquery UI theme in style

Question

In my project I have included to jQuery UI.I am using Bower, Yeoman and Grunt.
I added jQuery UI: bower install jquery-ui --save .
but the jQuery UI theme was not included in Bower style components.

<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" /> 
<!-- endbower --> 
<!-- endbuild --> 
<!-- build:css(.tmp) styles/main.css ->

Help me with this problem .

Ottoottoman

What do you mean by "not included in Bower style components"? – Distrust

<!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css -> . The jquery ui css not included here – Ottoottoman

Answer 1

This is not issue with library . its in Grunt-wiredep which has problem in injecting dependencies which has file name like jquery-ui,socket-io,font-awesome. there is way to override it .

wiredep: {
            target: {
                src: '<%= jericho.client %>/index.html',
                ignorePath: '<%= jericho.client %>/',
                exclude: [/es5-shim.js/, /json3.js/ ,/bootstrap.css/, /font-awesome.css/ ],
                overrides: {
                    'socket.io-client': {
                        main: 'socket.io.js'
                    },
                    'jqueryui-touch-punch': {
                        main: 'jquery.ui.touch-punch.js'
                    }
                }
            }
        },

so add 'jquery-ui': { main: 'jquery-ui.js' } . in the grunt wiredep configuration.

Link: https://github.com/taptapship/wiredep/issues/86

Ottoottoman

If you can show how to do it that would be great. I'm having the exact same issue! – Overstride

Where exactly this configuration file located? because there are hundreds of bower.json files in my project! – Hazy

@Overstride check grunt file for wiredep task and add this overrides: { 'socket.io-client': { main: 'socket.io.js' }, this will help you in solving this issue – Ottoottoman

@SlavikMe there will be bower.json in root directory of your project , which has bower dependencies of your project . There will be bower_components folder which has list of packages and each individual has bower.json , which is configuration of the particular package – Ottoottoman