LESS does not work in the browser. What's wrong?

N

Nikolai Chuprik2018-01-20 17:12:14

Less

Nikolai Chuprik, 2018-01-20 17:12:14

<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet/less" type="text/css" href="style.less" />
  <script src="less.min.js"></script>
</head>

<body>
  <main>
    Красный текст
  </main>
</body>

</html>

style.less:

body {
  main{
    color: red;
  }
}

No, it works and that's it! Error in console:
Failed to load style.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
If I paste the script like

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

then in general, when opening html, the browser goes into thoughtfulness and after 15 it issues:
GET file://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js net::ERR_FILE_NOT_FOUND
Shaitan.
Chrome browser, open html locally from computer.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

K

Kalombyr, 2018-01-20
@choupa

Browsers do not directly accept LESS, only css, so you must first compile LESS into regular css.
There are a bunch of compilers - from a JavaScript script embedded in the page itself to infinity (for example, install via npm: npm install -g less)
Error, these are actually browser security restrictions, in short, so that scripts cannot load anything else when located not on the same domain as the downloaded data.

S

sim3x, 2018-01-20
@sim3x

Download the file less.min.js and put it locally