I hope I'm not creating a duplicate topic, but I've been searching for two days and can't find a solution to this.
We are starting a new project in MVC4 and we have the less version of bootstrap loaded. The issue I'm running into is when I try to reference some classes or variables in the bootstrap.less
, my global.less
, or any thing outside the current file. I can create a variable in the top of the current file and use it just fine, but if I want to use something out of a separate file, I have to @import
it. This would be fine if my entire app's less was in one file, but I'd have to @import 4+ files into each page/section less file I create.
I added the MVC4 bundling addition from https://gist.github.com/2002958
The issue, as I am seeing it, is that each file is evaluated and converted to css independently. I tried to simplify the process and build a massive less string from all of the files in the less bundle and then convert them (Less.Parse(lessString)
), but I'm getting the error:
"You are importing a file ending in .less that cannot be found"
So here's my ultimate question: Is there a way to simply parse a less string without there being a physical file referenced? That would resolve my issue.
If that's not possible for some odd reason, is there a component or process already in place that I don't know about that actually bundles the files together before minifying them?
Any light on this subject would be appreciated as I am spinning in circles trying to get this to work.
This question was also posted in the Dotless group:
https://groups.google.com/forum/?fromgroups#!topic/dotless/j-8OP1dNjUY
This solution is working for me:
I have two NuGet packages:
- dotless
- dotless adapter for system.web.optimization
In my web.config
, I have these lines:
<configuration>
<configSections>
<section name="dotless"
type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
</configSections>
<system.web>
<httpHandlers>
<add path="*.less"
verb="GET"
type="dotless.Core.LessCssHttpHandler, dotless.Core" />
</httpHandlers>
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<handlers>
<add name="dotless"
path="*.less"
verb="GET"
type="dotless.Core.LessCssHttpHandler,dotless.Core"
resourceType="File"
preCondition="" />
</handlers>
</system.webServer>
<dotless minifyCss="true" cache="true" web="false" disableParameters="true" />
</configuration>
Note that you should define dotless params for your needs.
In BundleConfig.cs
:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new LessBundle("~/bundles/styles/").Include("~/Content/site.less"));
BundleTable.EnableOptimizations = true; // false if you want to debug css
}
And finally, Site.less
:
/* I have to redefine some bootstrap mixins and variables,
so importing bootstrap and extending happens here: */
@import "bootstrap-extends.less";
/* all other needed less should be included here too, for example:
@import "admin.less";
@import "controls.less";
etc
*/
body {
}
site.less
and bootstrap-extends.less
are inside the Content folder. bootstrap-extends
holds all needed @import
directives, which are usually listed in ~/Content/bootstrap/bootstrap.less
.
Have you looked into the LESS bundle transformer?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With