Bolero icon indicating copy to clipboard operation
Bolero copied to clipboard

How do I use different CSS files in Bolero pages?

Open MiroslavHustak opened this issue 2 years ago • 2 comments

I am new to Bolero. I need two separate layouts both with a separate menu system - one for "normal" web pages, the other for a CMS. That means two separate css systems.

Is it possible to have two Elmish loops to achieve that? If not, what then? I have tried to utilise two Elmish loops, but the CMS loop does not work. Visual Studio signals no error, but the CMS page gets me back to the base as if there was something wrong with the routing (which certainly is).

See below for parts of my code, but you will probably need much more - the complete code is available on GitHub (Project2Bolero). The CMS system is only simulated there, it is to be coded later.

member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =
       app
           .UseAuthentication()
           .UseRemoting()    
           .MapWhen(
               (fun ctx -> ctx.Request.Path.Value.StartsWith "/rozcestnikCMS"),
               (fun app ->
                       app
                           .UseBlazorFrameworkFiles()
                           .UseStaticFiles()
                           .UseRouting()
                           .UseEndpoints(fun endpoints ->
                                                        endpoints.MapBlazorHub() |> ignore
                                                        endpoints.MapFallbackToBolero(IndexCMS.page) |> ignore)
                       |> ignore
               )
               )
           .UseBlazorFrameworkFiles()
           .UseStaticFiles()
           .UseRouting()            
           .UseEndpoints(fun endpoints ->
               endpoints.MapBlazorHub() |> ignore
               endpoints.MapFallbackToBolero(Index.page) |> ignore)
       |> ignore

Index.page

let page = doctypeHtml {
   head {
          //some code
   }
   body {        
       div { attr.id "generalLayout"; rootComp<Client.Controller.MyApp> }
       boleroScript
   }
}

IndexCMS.page

let page = doctypeHtml {
   head {
      //some code
   }
   body {        
       div { attr.id "generalLayout"; rootComp<Client.ControllerCMS.MyCMSApp> }
       boleroScript
   }
}

Controller.fs

type MyApp() =
   inherit ProgramComponent<Model, Message>()

   override this.Program =
       let remote : RemoteServices =
           {
               login = this.Remote<Login.RemoteService>()
           }
       let init _ = initModel, initCmd
       let update message model = update remote message model
       Program.mkProgram init update view
       |> Program.withRouter router

ControllerCMS.fs

type MyCMSApp() =
   inherit ProgramComponent<Model, Message>()

   override this.Program =        
       let init _ = 
           initModel, Cmd.none
       Program.mkProgram init update view
       |> Program.withRouter router

MiroslavHustak avatar Jun 01 '22 20:06 MiroslavHustak

I have found this article - How do I use different CSS files in Blazor pages? Is there any equivalent of this in Bolero?

MiroslavHustak avatar Jun 11 '22 08:06 MiroslavHustak

Would it be possible to know whether using different CSS files in Bolero is possible or whether it is totally impossible? If it is possible, what is necessary to be proficient in to resolve the problem? In Blazor? Or in ASP.NET Core?

MiroslavHustak avatar Sep 23 '22 08:09 MiroslavHustak