title: less css not rendering (for a split second) on page load
body: <p>I'm using less css in my stylesheets. I'm also in localhost via xampp.
  I'm having an issue with my stylesheet not rendering (for a split second) on page load.
  The page loads quickly without the styles, then loads just a split second later with the styles applied.</p>
  <p>Has anyone had any similar issues using less?</p>
  <p><strong>header.php</strong></p>
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;title&gt;Feed&lt;/title&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta name=viewport content=&quot;width=device-width, initial-scale=1&quot;&gt;
        &lt;!-- style sheets --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css&quot; /&gt;
        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot; /&gt;
        &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css&quot; /&gt;
        &lt;link rel=&quot;stylesheet/less&quot; href=&quot;styles.less&quot; /&gt;
        &lt;!-- scripts --&gt;
        &lt;script
          src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;
          integrity=&quot;sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=&quot;
          crossorigin=&quot;anonymous&quot;&gt;
        &lt;/script&gt;
        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot; integrity=&quot;sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js&quot; &gt;&lt;/script&gt;
        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
        &lt;body style=&quot;font-family: 'Roboto', sans-serif;&quot;&gt;
  </code></pre>
  <p><strong>index.php</strong></p>
  <pre><code>&lt;?php
      require 'navbar/navbar.php';
      require 'header.php';
  ?&gt;
  
  &lt;!-- My HTML source here --&gt;
  </code></pre>
  <p><strong>styles.less</strong></p>
  <pre><code>@import 'whitetheme.variables.less';
  
  /* styles are here */
  </code></pre>
  <p><strong>whitetheme.variables.less</strong></p>
  <pre><code>    @dark-font-color: rgba(0,0,0, .9);
      @medium-font-color: rgba(0,0,0, .8);
      @light-font-color: rgba(0,0,0, .7);
      @secondary-background: #fff;
      @primary-gray: #f0f2f5;
      @primary-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      @primary-blue: #4c8bf5;
  </code></pre>