Automatically add css from lib with bower

Hi everybody,

I am new to roots and bower.
I Would like to know if after installing a jquery lib with bower, it is possible to automaticaly include the css.
Example, I’ve add these lib (GitHub - harvesthq/chosen: Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.) by adding a line in bower.json.
And then I’ve include the lib via the array jsFileList from Gruntfile.js

Everything is good for the js of that plugin, but what about the css?

Where am I supposed to include the css of my jquery plugin?
And, is there a way to automaticaly include this css file?

Thanks everybody

For the CSS you’ll have to @import for now or manually include some other way. With the upcoming version (8.0.0), this is automatically taken care of with main-bower-files + wiredep.

ok thanks for the answer

I have sage 8.0.1 and I’m familiar with procedure for less files with bower and wiredep, but what about css files? wiredep only add less files to assets/styles/main.less.
is there any way to automate this process for css files, or i need to add this manually to assets/manifest.json?

If the Bower package has CSS defined on the main property (or you override it in your theme bower.json) then it’s automatically added to the main theme stylesheet.


Oh, you’re right. seems i need to add a css after my bootstrap.css not mixed with it (it’s bootstrap-rtl which sit on bootstrap.css and change it for rtl languages)
I’ve added it to manifest.json like this:

"bootstrap-rtl.css": {
  "bower": ["bootstrap-rtl"]

it would give me bootstrap-rtl.css in dist/style/, but it doens’t add this file in wp_head function. I have to add it manually like main.css file to lib/assets.php, but i’m consider if this is right workflow or not? I want to add another css but not in main.css.

1 Like

Correct. You can copy the sage_css enqueue line and modify it for the new filename

wp_enqueue_style('bootstrap_rtl', asset_path('styles/bootstrap-rtl.css'), false, null);
1 Like