How to include Less correctly

Question

I'm having a small problem with Less . I can't seem to get it working. I'm running it client side. It just doesn't create the CSS, the page stays unstyled.

Header

   <!-- Include LESS Stylesheets -->
    <link rel="stylesheet/less" type="text/css" href="/includes/style/general.less" />

    <!-- Include Scripts and Co -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

Index

    <body>

    </body>

general.less

@rcmsblue: #8AE9FD;

body{
  background-color: @rcmsblue;
}

Am I doing something wrong?

Probably it's the absolute path in your `href` attribute. If your `includes` folder is in the same place as your HTML, try removing the leading slash in your include: `href="includes/style/general.less"` — Jordi Nebot, May 03 '16 at 17:05
You're welcome! If you have doubts about using relative or absolute paths/urls, read this [great answer](http://stackoverflow.com/a/21828923/1534704) by @PeeHaa — Jordi Nebot, May 03 '16 at 17:15

Kunj · Answer 1 · 2018-11-14T06:51:34.740

Questioner might get the solution, here is a good info on slash rules. Few other points to consider when use LESS:

Include your stylesheets before the script and when you link more than one, each of them compiled independently so any variables, mixins or namespaces defined in a stylesheet are not accessible in others. Detailed usage information available at http://lesscss.org/usage/
And, don't forget to add MIME type that are associated content types served as static files by the web server.
```
File name extension: .less
MIME type: text/css
```

How to include Less correctly

1 Answers1