I am using lesscss.org's styles on my MVC application.
It works great, but unfortunately my web host does not support .less file extensions, neither will they add support.
Seeing though LessCSS makes use of JavaScript, surely there must be a way to rename my CSS file from site.less to site.css and change the JavaScript to make use of the .css extension instead of the .less extension.
Please note I am not using dotLess, and compiling prior to release is also not what I am looking for.
Finally got it working.
All i had to do is modify my web.config of my MVC web application and add the following:
<system.webServer>
...
<staticContent>
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>
I re-published the site to my hosting provider afrihost, and it wall worked perfectly.
The script appears to only be looking for the stylesheet/less rel. As far as I can tell, the file extension doesn't matter.
To clarify, renaming styles.less to styles.css and using the following code should work:
<link rel="stylesheet/less" type="text/css" href="styles.css">
<script src="less.js" type="text/javascript"></script>
Simply convert to css locally before you upload it.
$ lessc styles.less > styles.css
From the usage page:
http://lesscss.org/#-client-side-usage
You can pass -x for minification.
Related
Is it possible to get bootstrap glyphicons to work without adding this code to web.config?
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Unfortunately I am unable to add this at my workplace but would still like to use the pagination from bootstrap. Is there any other way around this? These are the errors I am receiving.
Maybe somehow download the images directly and change the bootstrap css to find the correct ones? All I need is the pagination ones at the moment. Any ideas?
Try going to the file's address and fix it from there. If it's not there too then just use a CDN: Bootstrap CDN | MaxCDN
You might be able to:
Use Bootstrap hosted on a CDN
Build or modify bootstrap and remove the woff fonts
A combination of the two, modify your own Bootstrap to use woff files from a CDN
Rewrite the glyphicon part of Bootstrap to use images (probably the worst idea, but it would work).
You should be able to use bootstrap pagination even if glyphicons-halflings-regular.woff2 or glyphicons-halflings-regular.woff cant be found.
Bootstrap is coming with glyphicons-halflings-regular.ttf by default. The browser will use the first compatible font file that it will found and ttf is well supported.
For more information: Why should we include ttf, eot, woff, svg,... in a font-face
Maybe something is wrong in your html.
In most of LESS compilers, it's possible to use compiler to convert a .less file to a .css file. It's also possible to determine the output directory via some kind of configuration.
Is it possible to do the same in DotLess? How should I do it?
What I'm after is something similar to this configuration:
<dotless minifyCss="false" cache="true" web="false" />
<lessFile source='/content/example.less' target='/content/example.css' />
</dotless>
On the DotLess site there is a quick usage guide. Essentially, if you have set up Dotless in your project, you just need to reference the less files in your web pages, as you would a css file.
<link rel="stylesheet" type="text/css" href="bacon.less">
Dotless will then convert the less to css for you via the http handler.
I am having the strangest behaviour. I recently did a SVN update to an older revision so I could debug something and I lost access to my main stylesheet which is located in a styles folder eg:
<link href="/styles/main.css" rel="stylesheet" type="text/css" />
However I can still access (which is located in the same directory):
<link href="/styles/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
I also found that I could access all of my javascript files located at:
/scripts/<my javascript files>
until I did a second update to a previous revision, and now I cant access
/scripts/jquery-1.9.0.js
but I can still access the other scripts in the same directory!! By not being able to access them I mean that I get redirected to the log in. ASP.NET Membership seems to be looking for authorisation to access these files. ie
http://localhost/Account/Login.aspx?ReturnUrl=%2fstyles%2fmain.css
I am using RBA but not in these directories. My page source looks like this:
<link href="/styles/main.css" rel="stylesheet" type="text/css" />
<link href="/styles/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="/scripts/jquery-1.9.0.js"></script>
<script src="/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/scripts/spin.js"></script>
<script src="/scripts/js.js"></script>
and I find it strange that its only the first css and js file that are being blocked.
Just to reiterate, this has worked fine until I did the SVN Update To Revision. Updating to Head revision afterwards does not fix the problem. Furthermore I have this application deployed and it works fine.
Explicitly setting access in the web.config does nothing....
<location path="styles/main.css">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
If someone has an idea I would be most grateful. Thanks.
UPDATE
Setting
<roleManager enabled="false">
does not fix the problem.
I think you have permission issue after updateing the working copy to previous revision.
Change the permission for your project root directory/ or the directory of concern as follows.
1.Right Click -> properties -> Edit permission Tab
2.Look fir IIS_User or I_User or NetworkService object in the permission window.
3.If this object is not found add a new Object "EveryOne".
4.Edit permission for that object and select(all permission for development machine).
5.Done now try to access.
Am currently working on a spring mvc project on Eclipse. Am unable to get an external css working in a .jsp . My folder structure is as follows
Myproj, WebContent,
WEB-INF,
css,
.css files
I use the following piece of code to reference the css file.
<link href="<c:url value="/css/filename.css" />" rel="stylesheet" type="text/css" />
I use spring jars version 3.1.0. I have also added the following lines of code within myproj-servlet.xml
<mvc:annotation-driven />
<mvc:resources location="../css/" mapping="/css/**"/>
Still am unable to access my css file or get it apply to my jsp file. While using firebug i see that the css link gets a 404 not found only. Where could be the issue/ how can i resolve?
Change your resource location to
<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
and while accessing on jsp you could very well write
<c:set var="context" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${context}/css/style.css" />
Cheers.
I use Asp.net 4 C# and MicrosoftAjax Minifier.
Please look at my code here; Using <Target Name="AfterBuild"> I'm able to minify all files .js and .css. The problem is that this code minify even the original files in my project solution, so would be almost impossible to edit theme once again.
I need instead minify all .js and .css on my solution after publishing it to a local folder.
In this way I can keep my original files in my project folder intact and have instead the site compiled and minified into another local folder.
I change my scripting using <Target Name="Publish">, I do not receive any error but It does not work.
Could you tell me what I'm missing here, and if there is a better approach to solve this problem? Thanks
<!-- Minify all JavaScript files that were embedded as resources -->
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="Publish">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin
JsSourceFiles="#(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js"
CssSourceFiles="#(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".css" />
</Target>
(copied from questions)
To deal with losing the original js/css files, ensure the target filenames include .min, eg. JsTargetExtension=".min.js" and CssTargetExtension=".min.css". See article on using MsAjax minifier: http://www.asp.net/ajaxlibrary/ajaxminquickstart.ashx
To then be able to publish the minified files, see this article: Using Microsoft AJAX Minifier with Visual Studio 2010 1-click publish
At my workplace, we are solving the minifying issue quite differently by using Chirpy addin for Visual Studio. It automatically minifies files to a .min version upon saving. See http://chirpy.codeplex.com/