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;
}
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.
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" />
Thanks for your help everyone - turns out the answer is that my localhost did not serve the mime type .less
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.
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.
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.
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" />
Related
I have an index.html file and index.css. The directory structure is:
img of directory structure
I am linking the css to html with : link rel="stylesheet" type="text.css" href="css/index.css"
I am using tomcat v8.5 to host. When I run my project on server I see this in the window within eclipse:
browser displayed within eclipse
However when I open up chrome/firefox and search, it is only pulling the index.html and the css is not being displayed :(
I read that files have to be specified with "relative path", however, the folder containing index.css is in the same directory(WebContent) as the index.html. So what is the issue with href="css/index.css" ? Can someone please help me with the path issue?
Thanks so much for your time !
There is a slight mistake in the link tag. Replace type="text.css" with type="text/css":
<link rel="stylesheet" type="text/css" href="css/index.css">
I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.
Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.
I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.
This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
I'm newbie to HTML 5 Application storage. Im trying a sample to test the offline storage. I have few questions. Please help.
Files used:
index.html
<html manifest="demo.manifest">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<h1>some text</h1>
<p>Some text.</p>
</body>
</html>
style.css
body{background-color: #333;}
h1{color: #c94054;}
p{color: #fff;}
demo.manifest
CACHE MANIFEST
CACHE:
style.css
index.html
I know that demo.manifest MIME type has to be set to text/cache-manifest and this has to be done in the *.htaccess file. I'm using apache tomcat 6.0 server on a windows environment. I'm not able to find this file inside the server. So, I created one (test.htaccess) in the root directory of my project (which is being developed on eclipse helios) that is, in d:/eclipse-workspace/ProjectName/ and my file looks like below:
test.htaccess
AddType text/cache-manifest .manifest
But application cache does not work when I stop the server and tried to access it as below:
http://localhost:8081/ProjectName/index.html
Please let me know what have I done wrong with this...Also, Is there a way to debug application cache
On a Tomcat server the MIME types are configured via the default web.xml file, conf/web.xml
Towards the end of that file you'll find a bunch of defined MIME types. You have to add
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
as the equivalent of what you'd put in .htaccess as used by Apache and other servers.
I had the same problem. Everything looked right: paths were correct, the manifest was in my project and I could manually browse to it, MIME type was set. It simply wasn't attempting to get this file from my HTML. The problem was I hadn't included the required line at the beginning of the manifest:
CACHE MANIFEST
Not having this was causing the browser to just silently ignore the manifest tag.
i've renamed my .css to .less and referenced the less.js file (version 1.3). I'm unable to edit the .less file, it's almost like it's readonly. Any ideas? thanks
i've got this in my root layout head tag:
<link rel="stylesheet/less" type="text/css" href="#Url.Content("~/Content/CSS/mystylesheet.less")"/>
and this in the body tag:
<script type="text/javascript" src="#Url.Content("~/Scripts/less-1.3.0.min.js")"></script>
the css works fine, i just cant make any edits whilst running and when stopped.
Using mvc 3 and razor
Don't use ~ in your path. Either use a relative path or a full path using file:// if you're working from localhost.
<!DOCTYPE HTML>
<html manifest="example.appcache">
<link rel="stylesheet" type="text/css" href="AppCache.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>Test to make sure css is being cached</p>
<img src="large.jpg">
<script src="AppCache.js"></script>
</body>
</html>
My example.appcache file has:
# v1 11/16/2011
AppCache.htm
AppCache.js
AppCache.css
large.jpg
The first time I navigated to the page, it asked
This website is asking to store data on your computer for offline use.
When I take Firefox offline and press refresh, the jpg disappears.
Q: What do I need to do to make sure the image is cached locally?
IIS does not serve unknown file types. You need to configure it to serve .appcache files with the MIME type text/cache-manifest, how you do this depends on which version of IIS you have:
In IIS6 use IIS manager
In IIS7 and later, you can either use IIS manager or add it in a mimeMap element in web.config
I just want to comment on the accepted answer here, as the mimetype mentioned does not work (at least in IIS7.5). The correct mimetype is:
text/cache-manifest
See:
https://developer.mozilla.org/en/Using_Application_Cache
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
Do not forget that you need
CACHE MANIFEST
At the top of you manifest document. It is required.
CACHE MANIFEST
# v1 11/16/2011
AppCache.htm
AppCache.js
AppCache.css
large.jpg
That should do the trick