Grunt:dist - don't add vendor.css bootstrap style, but other styles

Question

I have one AngularJS project using yeoman, grunt and bower. It is working fine. I am using one of WrapBootstrap themes with the application. So I don't need the default JQuery and Bootstrap from AngularJS.

In my index.html page, I have the following to include CSS styles.

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<link href="styles/pagestyle.css" media="all" rel="stylesheet"
    type="text/css" />
    <!-- / bootstrap [required] -->
<link href="assets/stylesheets/bootstrap/bootstrap.css" media="all"
    rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="assets/stylesheets/jquery/jquery_ui.css" media="all"
    rel="stylesheet" type="text/css" />
<link href="assets/stylesheets/light-theme.css" media="all"
    id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="assets/stylesheets/theme-colors.css" media="all"
    rel="stylesheet" type="text/css" />

I am not including any CSS from bower_components directory.

But when I do grunt serve:dist, it is adding bootstrap.css from bower_components/dist directory to the buld:css part. I don't want to add that. So I removed JQuery and bootstrap dependency from bower.json file. This is my bower.json file now

{
  "name": "app-web-client",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-resource": "1.2.15",
    "angular-cookies": "1.2.15",
    "angular-sanitize": "1.2.15",
    "angular-bootstrap": "0.11.0",
    "angular-route": "1.2.15"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

Then I tried doing grunt serve:dist. and I removed build:css block and was working fine.

But when I tried adding all those assets css styles inside build:css block, and doing a grunt dist, all the styles are gone and the block becomes empty. It will be only this much,

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->

And when opening in browser no styles are applied because its empty.

How to avoid this? I tried adding some other css inside that block. But it is replacing with empty block, and giving me this error. How to remove vendor.css from index.html. I tried

Answer 1

The build:css block is actually a directive for Grunt to follow. Remove these four lines from your index.html:

<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->

And re-run grunt. You should no longer have a reference to vendor.css in your index.html.