CODEWITHSUNDEEP
htmlcsslocalhostless
Hello-World
Hello-World

Reputation: 9545

Why LESS css does not work on localhost

According to this tutorial my less code should work but it doesn't.

Can you please help me to get my less css to work.

Right now it does not working - Page loads with no applied styles. What am I doing wrong?

The error is:

FileError: 'localhost:1/styles.less' wasn't found (404) in styles.less

But it is there in the root?

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>

</head>

<body>

    <div id="header">test</div>

    <h2>test h2</h2>

</body>

</html>

styles.less

LESS

@color: red;

#header {
    color: @color;
}
h2 {
    color: @color;
}

Upvotes: 4

Views: 9516

Answers (7)

user7869779
user7869779

Reputation:

In my case I already had the mimeType for .less on ISS, so I checked the Web.config file of my web and removed the following line because it was causing a duplication:

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

Upvotes: 0

tala9999
tala9999

Reputation: 1719

I'm using IIS 7.5 but this can be the same for other IIS versions:

The mime type for less must be added to IIS. But in my case, I have to add it to "Default Web Site" using IIS Manager, NOT to my application, to be able to load less file from browser.

Upvotes: 0

markthewizard1234
markthewizard1234

Reputation: 443

I encountered this issue too.

None of the above fixes worked, however I did manage to fix it when I checked the folder access that the less.css file was stored in.

Adding the IUSR user to have read rights to the folder allowed the file to be distributed correctly.

Upvotes: 1

AKS
AKS

Reputation: 1279

Assuming the website is hosted over iis express, Open the file

C:\Users\\Documents\IISExpress\config\applicationhost.config

and search for the tag
<staticContent lockAttributes="isDocFooterFileName">

and add the .less MIME as below

<mimeMap fileExtension=".latex" mimeType="application/x-latex" />

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

<mimeMap fileExtension=".lit" mimeType="application/x-ms-reader" />

Upvotes: 11

akif1
akif1

Reputation: 659

If you are using IIS you have to add a ".less" extension to MIME type within IIS manager. when you add a new MIMI, enter ".less" as the extension and "text/css" as the MIME type.

Upvotes: 11

Hello-World
Hello-World

Reputation: 9545

Thanks for your help everyone - turns out the answer is that my localhost did not serve the mime type .less

Upvotes: 4

KarelG
KarelG

Reputation: 5234

It seems that your source location of your file is not correct.

<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>

I have never seen that "_" could be used for navigation. Actually, if the script folder is in the same directory as the html page, then

<script src="script/less-1.4.1.min.js" type="text/javascript"></script>

should be enough to have a working js file on your page.

Upvotes: 0

Related Questions