0

I'm developing an ASP.NET MVC application using dotless and bundling.

When my CSS is optimised I get a link such as:

<link href="/bundles/global.css?v=xxxxx" rel="stylesheet"/>

However, when optimisation is disabled I get:

<link href="/css/header.less" rel="stylesheet"/>
<link href="/css/content.less" rel="stylesheet"/>
<link href="/css/footer.less" rel="stylesheet"/>

In Chrome these less files are read just fine.

However, is it common practice to use .less files directly as stylesheets?

I'm concerned that some browsers might not recognise the stylesheets as they don't end in .css and therefore will ignore them.

UPDATE: For clarification, the .less files are pre-compiled server side and therefore are valid CSS files. No client-side processing is happening.

Curtis
  • 101,612
  • 66
  • 270
  • 352

1 Answers1

0

I'm pretty sure as long as the user has Javascript enabled then the only thing that will process and interpret the .less files into CSS is the less.js library. You could also check their Browser Support.

I also wouldn't suggest using LESS in production as it's whole purpose is to help you create dynamic stylesheets even faster than normal in development. If you leave it in production then each time the browser loads the page it will have to download the less files and render them which is more time consuming than simply compiling your files into one .css file.

Edit:

You could ensure that the browser doesn't reject your file and treats your less file as a css file by setting the MIME type on your server to text/css for files with the .less extension.

For example if you're using Apache you could use the following .htaccess file to do so.

AddType text/css .less
Eliel
  • 164
  • 6
  • I'm not processing LESS on the client side. It's processed server-side using dotless. The contents of the `.less` file is valid CSS. – Curtis Sep 02 '14 at 08:24
  • Sorry my original answer was completely off. I updated my answer. – Eliel Sep 02 '14 at 09:49