Search code examples
cssasp.netwebformslessdotless

Styles from dotless files not used

We have a website that makes use of .less files (the pre-compiler dotless has been installed using nuget), however the .less files are not handled as css files.

When trying to view the website in firefox, the console gives use the following error: The stylesheet http:// website/css/init.less was not loaded because its MIME type, "application/octet-stream", is not "text/css".

Our dotless file is trying to import more files: 

@import "imports";
..

But even replacing this text with css code, the styles are still not applied. But if I go to that file in Visual Studio, it is displaying all the css from the files that are imported.

Solution

  • If you're using the dotLess handler to process and serve your .less files on the fly (which is fine for debugging, but you might want to consider pre-compiling for release), you need to ensure that you also send them down with the correct mimetype.

    You can do this either at the server level in IIS Admin (if you're likely to using this for multiple sites on the machine), or at the local site level via the web.config - note that you can't do both, IIS will complain that there are multiple entries for the file extension.

    To do this in the web.config, within the <configuration><system.webServer> element add the following elements:

    <staticContent>
  <mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>

    Obviously, if you've already got some mimemap entries, just add the mimemap there.

    This will ensure that IIS claims that the .less files served from the handler as CSS rather than the default application/octect-stream.

    If that's still not serving them as processed, there are a couple of other things you'll need to check:

    1. Ensure that the handler is correctly registered in both the <system.webserver><handlers> and <system.web><httpHandlers> sections (depending on the version of IIS you're using:
      <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
      and
      <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
    2. Ensure that IIS is configured to send all requests through the ASP.NET handlers configured in step 1. By default, .less files are probably being considered "static files" and will only be handled by the StaticFileModule.
      enter image description here