title: How to do LESS @import without @import literally?
body: <p>I'm using LESS. From Google PageSpeed I've learnt that, using <code>@import</code> in CSS file will hamper the site speed. So I'd like to exclude any <code>@import</code> thing from my CSS. I have 2 different stylesheets <code>reset.css</code>, and <code>rebuild.css</code> - to avoid <code>@import</code> I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to <code>@import</code> into the <code>styles.less</code> (main stylesheet) file, in a way, so that, they actually won't generate any @import when I'm compiling them with <strong>WinLESS</strong> into pure <code>styles.css</code>. I want them to insert physically into the style.css when I'll compile the <code>styles.less</code> into <code>styles.css</code>.</p>
  
  <p>I want <code>styles.less</code> like:</p>
  
  <pre><code>@import('reset.css');
  @import('rebuild.css');
  
  /* SITE STYLES HERE */
  </code></pre>
  
  <p>But want the rendered <code>styles.css</code> to be:</p>
  
  <pre><code>code from reset.css
  code from rebuild.css
  
  /* THEN, SITE STYLES HERE */
  </code></pre>
  
  <p>I'm using <strong>WinLESS</strong> to compile the CSS file from LESS, and NOT USING <code>.less</code> with JavaScript directly, but using the <code>styles.css</code> only.</p>