title: How to @import .css file as a .scss file in sass?
body: <p>I am using gulp as a task runner which merge and minifying <code>scss</code> files for me. In this case if I try to import a regular <code>CSS</code> file, it will compile to a css <code>import</code> statement as below:</p>
  
     <pre class="lang-css prettyprint-override"><code>/* style.scss */
  @import "../../bower_components/animate.css/animate.css";
  
  /* style.css */
  @import url(../../bower_components/animate.css/animate.css);
  </code></pre>
  
  <p>So how to import that regular css file, to have a <strong>compiled</strong> version of that in the <code>style.css</code> instead of just <code>css @import</code> statement?</p>