Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Martin 810 posts 1221 karma points c-trib
    Jun 28, 2022 @ 15:09
    Martin
    0

    Can I use the CSS Isolation feature of asp.net core 6 with Umbraco 10?

    Has anyone managed to get the CSS Isolation feature of .net core 6 (razor) working in Umbraco 10?

    I can get a test application to build the css files ok but it's not injecting the scope identifiers into the cshtml files. As a test I created a standard mvc project and added Umbraco 10 to it, so that I could switch between the standard MVC start-up and an Umbraco start-up but I cannot seem to locate what bit of the pipeline injects the scope into razor files.

    So this bit is working...

    <link href="TestMvc.styles.css" rel="stylesheet">
    

    and generates...

    /* _content/TestMvc/Views/Home/Index.cshtml.rz.scp.css */
    h1[b-zadwjemmwk] {
        color: blue;
    }
    /* _content/TestMvc/Views/Shared/_Layout.cshtml.rz.scp.css */
    /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
    for details on configuring this project to bundle and minify static web assets. */
    
    a.navbar-brand[b-eco2muvx3g] {
      white-space: normal;
      text-align: center;
      word-break: break-all;
    }
    
    a[b-eco2muvx3g] {
      color: #0077cc;
    }
    

    But doesn't add these to the razor files...

     <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container-fluid">
                    <h1>test 4</h1>
                </div>
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3">
                <h1>
        Test
    </h1>
            </main>
        </div>
    
  • Martin 810 posts 1221 karma points c-trib
    Jul 04, 2022 @ 16:10
    Martin
    0

    Exploration into this so far....

    My suspicion is the services method AddControllersWithViews() or a lack thereof in the Umbraco source is breaking a few things in asp.net 6.0.

    1. Hot reload in some cases (Seems to be the case for Views - only a manual browser refresh works after saving changes).
    2. CSS isolation - which requires pre-compilation of views and the isolated CSS on save, i'm assuming through the builder service AddControllersWithViews()

    What does work via Hot reload OOTB (with "dotnet watch run" at least) is CSS injection as long as the CSS files have a watch added to the csproj file. If you add one for cshtml files, the changes don't get pushed to the browser at all!

    A service override in the Umbraco source seems to have been provided, a method called AddMvcAndRazor() but the problem with this is it also calls AddRazorRuntimeCompilation(), which then turns off Hot reload altogether in .net 6.0, Uggh!

    I have since found a "reasonable workaround" which is to use Razor Class Libraries for my partials and view components. This way I can take advantage of Hot reload and CSS isolation as RCL's seem to bypass the Umbraco pipeline. The exception to this is Views, if I add them to the RCL hot reload fails and doesn't trigger a recompile for some bizarre reason, even though it works fine for partials! Also in the back office the files fail to appear in the UI at all.

    So in an attempt to create an env. that's rapid (CSS isolation) and DRY (Partials/ViewComponents) I've gotten mostly there!

Please Sign in or register to post replies

Write your reply to:

Draft