How to use css/less styles in RazorEngine template

Question

I'd like to generate a great amount of different mails by the use of Antaris RazorEngine. Is there a possibility to include script and style bundles to the layout? We build those bundles dynamically together, so they include many different .css/.js-files.

In our non-e-mail layouts we always include them like that:

@Styles.Render("~/bundles/" + theme + "/styles") 
@Scripts.Render("~/bundles/scripts") 
@RenderSection("scripts", false)

I don't want to use inline-styling, as this would stretch each view extremely and would be hard to maintain.

I tried to google this issue, but I haven't found, what I was searching for.

Could anyone explain, how to do this and if it doesn't work like I actually need it, explain why and how to do it in an other way?

score 1 · Answer 1 · answered Jul 17 '19 at 18:14

Check out this answer for the base template. From this point, you can create helper classes like the following. These are necessary to create since Scripts is a static class and cannot be added to your TemplateBase as a property like the HtmlHelper and ViewDataDictionary classes can.

    public class ScriptsHelper 
    {
       public IHtmlString Render(params string[] scripts) 
       {
          return Styles.Render(scripts);
       }
    }

You can then add those helper classes to your HtmlTemplateBase<T> class as public properties

    [RequireNamespaces("System.Web.Mvc.Html")]
    public class HtmlTemplateBase<T>:TemplateBase<T>, IViewDataContainer
    {
        public ScriptsHelper Scripts = new ScriptsHelper();

        //... Additional Code 
    }

Your RazorEngine view will now have access to the functions you have added to your helper class. So you are indirectly calling the functions you need and can call them the same way you would use the normal classes.

// This will actually be calling ScriptsHelper.Scripts(), which then calls the static function
@Scripts.Render("~/scripts/scripturl")

These are somewhat hacky solutions to the issue. You will need to extend your ScriptsHelper class with each Scripts function that you need. The same process can be performed for your Styles class as well.

You may be able to utilize the Reference Resolver class to import the System.Web.Optimization namespace, but I wasn't able to get that working properly.

Gräfin_Koks · Accepted Answer · 2019-04-08T14:36:53.060

Well, since no one could answer it, I used Premailer to move my .less files (or the .css generated out of it) inline. Works for me, even it's not exactly what I wanted.

string viewString = System.IO.File.ReadAllText(viewPath); // view to string
string cssSiteString = System.IO.File.ReadAllText(cssSitePath); // css-file to string

Engine.Razor.AddTemplate(nameoftemplate, viewString);
Engine.Razor.Compile(viewPath);

var result = Engine.Razor.Run(viewPath, null, model, viewBag);

var pm = new PreMailer.Net.PreMailer(result); 
var completeMail = pm.MoveCssInline(css: cssSiteString); // this line moves the css inline

How to use css/less styles in RazorEngine template

2 Answers2