48

I'm using IIS 7.5 and I'm unable to load the less file because it gives a 404 error.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Less Tutorial</title>
        <link rel="stylesheet/less" href="style.less" />
        <script src="less-1.0.41.min.js"></script>
    </head>
    <body>        
        <div id="container">
            <a href="#">My Anchor</a>
        </div>
    </body>
</html>

LESS:

@primary_color: green;

#container {
    width: 200px;
    height: 200px;
    background: @primary_color;
}
Diogo Cardoso
  • 21,637
  • 26
  • 100
  • 138

5 Answers5

102

When using Asp.Net you can add the mime type in your web.config:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".less" mimeType="text/css" />
  </staticContent >
</system.webServer>
Giorgio Bozio
  • 2,982
  • 3
  • 20
  • 20
  • 2
    @Marthijn: because when use set text/less IIS can block send file to browser with information: "The resource cannot be displayed because the file extension is not being accepted by your browser". – Michał Zalewski May 11 '13 at 18:55
  • 1
    this can be done on the server itself with Diogo's solution. If you are just running something on localhost without going through IIS this is the quick fix – Jon Harding Jan 16 '15 at 20:51
  • Yeah I tried adding that manually on Web.Config with no luck, through Handlers on IIS manager I could add it and worked perfectly fine. `*.less` of type `dotless.Core.LessCssHttpHandler,dotless.Core` name `dotless`. – Felype Apr 28 '15 at 16:57
  • @Felype I think you were trying to do a different thing. The question here was about serving .less files, not executing a handler to compile less to css. – Giorgio Bozio Apr 29 '15 at 09:51
  • A plain .less file isn't interpreted by the browser styling sheet properly. Unless he stated something like serving CDN or static, I'm convict that his intention is to serve Less files as styling for his content, instead of static plain-text content. But I think this is just a shock of interpretation between my understanding and yours, nothing personal. – Felype Apr 29 '15 at 13:50
  • @Felype IIs responds 404 because mime type is missing not because less is not compiled to css. In fact Less can be used client side and this is the scenario of this question (look at the less-1.0.41.min.js linked js in header). http://lesscss.org/#client-side-usage – Giorgio Bozio Apr 30 '15 at 09:35
  • I see. And I just noticed the reference to less-1.0.41.js in the code. (y) I'm using dotless to reduce traffic and for better performance on mobile devices, but now I know not everyone will go by the same line, thanks for clarifying – Felype Apr 30 '15 at 13:35
8

When using webmatrix go to "Documents\IISExpress\config" open "applicationhost.config" and add the line mimeMap fileExtension=".less" mimeType="text/css" under the section "staticContent". Hope this helps.

Geoffrey
  • 93
  • 3
  • 7
  • I have done this but the problem still did not resolve. The part of config file is as follows: `code` `code` – AKS Mar 24 '14 at 14:48
  • @AKS the **staticContent** tag already exists with a number of mimeMap tags just search for it and add **** – Geoffrey Apr 03 '14 at 11:59
2

In my MVC 5 application, I tried many of these approaches and couldn't resolve the problem. Ultimately, I installed Web Essentials for VS 2013 and took advantage of the built-in LESS compiler. Every time you save your LESS file, it will generate the corresponding CSS. In my layout, I simply point to the CSS file and worked around my trouble.

rictionaryFever
  • 751
  • 8
  • 14
  • Thanks... this also worked in VS 2017... note that saving the file did not automatically compile it. Instead you have to right click it and then select compile file from the context menu. – Anthony Griggs Mar 25 '20 at 21:49
0

I faced this error multiple times now and despite adding a mime type i got the same error over and over again.

Then i discovered that adding a mime type just fixes the 406 error code, not 404. It has something to do with privileges i think.

So tryed to open the file as Administator (like notepad.exe -> run as Administrator) and overwrite the file with itself. This worked for me.

ViRuSTriNiTy
  • 5,017
  • 2
  • 32
  • 58
-2

Here is a good video tutorial that should get you started -> http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/

EDIT: not really the fix but a small tip. always add type="text/css" when opening style tags or linking to a stylesheet in the link tag.

Christophe
  • 4,798
  • 5
  • 41
  • 83