Adding LESS file to HTML

Question

I have downloaded less.js and trying to include it. Also trying to include a custom button.less file in my HTML code. It is throwing me the below error.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="C:\Users\lenovo\Desktop\male\OnlineOrder_Pro\styles\button.less" />
<script src="C:\Users\lenovo\Desktop\male\OnlineOrder_Pro\less\dist\less.js" type="text/javascript"></script>

<body>
<div>
<input type='button' value="Submit"/>
</div>
</body>

</head>
</html>

LESS file

input[type=button] {
      height: 30px;
      width: 70px;
      border: solid 1px rgb(182, 234, 230);
      border-radius: 5px;
      font-family: sans-serif;
      background-image: linear-gradient(210deg, white 30%, rgb(182, 234, 230) 99%);
}

above is the less. Should it be wrapped inside a attribute or it should be the way it is.

ERROR is:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
less.js:413 XMLHttpRequest cannot load file:///C:/Users/lenovo/Desktop/male/OnlineOrder_Pro/styles/button.less. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.doXHR @ less.js:413loadFile @ less.js:470loadStyleSheet @ less.js:627loadStyleSheets @ less.js:638module.exports.less.refresh @ less.js:708module.exports.less.refresh @ less.js:704(anonymous function) @ less.js:84
less.js:413 Uncaught (in promise) DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/lenovo/Desktop/male/OnlineOrder_Pro/styles/button.less'. {message: "Failed to execute 'send' on 'XMLHttpRequest': Fail…Desktop/male/OnlineOrder_Pro/styles/button.less'.", name: "NetworkError", code: 19, stack: "Error: Failed to execute 'send' on 'XMLHttpRequest…ktop/male/OnlineOrder_Pro/less/dist/less.js:84:25", INDEX_SIZE_ERR: 1…}doXHR @ less.js:413loadFile @ less.js:470loadStyleSheet @ less.js:627loadStyleSheets @ less.js:638module.exports.less.refresh @ less.js:708module.exports.less.refresh @ less.js:704(anonymous function) @ less.js:84

any help is appreciated. thanks in advance!!!

The way you are linking your file is not how you should be doing it, also, you should compile less files before you deploy your website — Mr. Alien, Apr 18 '15 at 16:42
[Google always](https://www.google.co.in/search?q=compile+less+files&oq=compile+less+files) — Mr. Alien, Apr 18 '15 at 16:46
If you get an error that you don't understand, your first step should be to *search* for that error. — cimmanon, Apr 18 '15 at 16:56
Which browser are you using? If it's Google Chrome, then the local javascript files will not load due to security reasons. You can use a local server like WAMP for this purpose. — Hariprasad, Apr 18 '15 at 18:34

Adding LESS file to HTML

0 Answers0