Search code examples
javascripthtmlcssless

I can't load Less CSS to my website, what should I do?

So, I've been trying to make a website with Less CSS.
I couldn't get it working with this HTML.

<!doctype html>
<html>

<head>
  <title>Site I am working on</title>
  <meta charset="utf-8">
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="https://cdn.jsdelivr.net/npm/less" ></script>
</head>

<body>
  <!-- ... -->
</body>

</html>

These are the errors I get in Chrome DevTools console.

less:10 Access to XMLHttpRequest at 'file:///C:/Users/stysan/Documents/some-site/styles.less' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https, isolated-app.
doXHR @ less:10
less:10          Failed to load resource: net::ERR_FAILED
doXHR @ less:10
less:10 DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/stysan/Documents/some-site/styles.less'.
    at Ct.doXHR (https://cdn.jsdelivr.net/npm/less:10:136145)
    at https://cdn.jsdelivr.net/npm/less:10:136804
    at new Promise (<anonymous>)
    at Ct.loadFile (https://cdn.jsdelivr.net/npm/less:10:136580)
    at d (https://cdn.jsdelivr.net/npm/less:10:143414)
    at m (https://cdn.jsdelivr.net/npm/less:10:144029)
    at https://cdn.jsdelivr.net/npm/less:10:145098
    at new Promise (<anonymous>)
    at s.refresh (https://cdn.jsdelivr.net/npm/less:10:144871)
    at https://cdn.jsdelivr.net/npm/less:10:146053
less:10 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'href')
    at less:10:145151
    at less:10:143969
DevTools failed to load source map: Could not load content for https://cdn.jsdelivr.net/npm/less.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Please help me, any help would be appreciated!

Solution

  • @UmairFarooq's reply helped me figure this out: I was pretty dumb.

    How did I fix it?
    The answer is pretty simple.

    1. I loaded less in your HTML using this command:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.1.3/less.min.js"></script>
    2. I opened a live server using Python 3.10: if you have Python installed with system path, you can open a live server on your HTML directory by writing this command in command prompt:
      python -m http.server 80
    3. And, finally, I opened it in my browser: localhost