I'm trying to use MVC4 bundling to group some of my less files, but it looks like the import path I'm using is off. My directory structure is:
static/
less/
mixins.less
admin/
user.less
In user.less, I'm attempting to import mixins.less using this:
@import "../mixins.less";
This used to work for me before when using chirpy with dotless, but now I noticed ELMAH was getting mad at me, saying this:
System.IO.FileNotFoundException:
You are importing a file ending in .less that cannot be found.
File name: '../mixins.less'
Am I supposed to use a different @import
with MVC4?
Here's the less class and global.asax.cs code I'm using to attempt this:
LessMinify.cs
...
public class LessMinify : CssMinify
{
public LessMinify() {}
public override void Process(BundleContext context, BundleResponse response)
{
response.Content = Less.Parse(response.Content);
base.Process(context, response);
}
}
...
Global.asax.cs
...
DynamicFolderBundle lessFB =
new DynamicFolderBundle("less", new LessMinify(), "*.less");
BundleTable.Bundles.Add(lessFB);
Bundle AdminLess = new Bundle("~/AdminLessBundle", new LessMinify());
...
AdminLess.AddFile("~/static/less/admin/user.less");
BundleTable.Bundles.Add(AdminLess);
...
I've written a quick blog post about Using LESS CSS With MVC4 Web Optimization.
It basically boils down to using the BundleTransformer.Less Nuget Package and changing up your BundleConfig.cs.
Tested with bootstrap.
EDIT: Should mention the reason I say this, is I also ran into the @import directory structure issue, and this library handles it correctly.