“Broken @import” error with grunt build?

Question

I am trying to build my first angular application. I am using yeoman and angular-generator. The app run fine with "grunt serve" but when I ran "grunt build" the process stops with the error -

Running "cssmin:generated" (cssmin) task
Warning: Broken @import declaration of "" Use --force to continue.

Aborted due to warnings.

I am not sure what is the cause of this error. I have looked everywhere but could not find a solution. Here are the css links -

 <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
    <base href="/">
    <!-- endbuild -->

Answer 1

I found the error, I just had to change the position of the link tags. It should be -

<!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
    <base href="/">

Now grunt build runs fine. So only the main.css file has to be put between <!-- build:css(.tmp) styles/main.css --> and <!-- endbuild -->