Using and routing Less file in the layout.cshtml in ASP.NET Core 2

Question

I've used a template for admin section (bootstrap admin template) in my project and installed it from Bower and I've applied ASP.NET Core 2.

When I run the project, I get an error that is:

FileError: 'http://localhost:52125/lib/bootstrap-admin-template/public/assets/less/theme.less' wasn't found (404)

in theme.less

But the file, theme.less, exists in the path!! I don't know why browsers cannot recognize the file.

For routing the theme.less file I did:

<link rel="stylesheet/less" type="text/css" href="~/lib/bootstrap-admin-template/public/assets/less/theme.less">

How can I fix this problem?

Answer 1

In the documentation on the StaticFiles middleware:

If the user requests a file of an unknown file type, the static file middleware returns a HTTP 404 (Not Found) response.

That seems to be what's happening here. If you want to serve less then you need to add a mapping for it:

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".less"] = "plain/text";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

Answer 2

Apparently, Less files can not be used directly in asp.net core 2 projects. It must first be compiled. In this link you can figure out that how be compiled a Less file.

https://docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa