component CSS isolation not woking

[qunshen]

It appears that Css isolation not supported in oqtane framework. it might related how oqtane load resouse files

[leigh-pointer]

@qunshen correct CSS Isolation is not supported. CSS , Js resources are loaded with in the razor module code.

@code {
    public override List<Resource> Resources => new List<Resource>()
{
        new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
        new Resource { ResourceType = ResourceType.Script, Url = ModulePath() + "Module.js" }
};

It is worth noting that everytime you change a resource you will need to build the module so that the new resources are copied to the corresponding folders. Running in debug will not pick up any changes.

[sbwalker]

Further to @leigh-pointer's response, due to its dynamic nature Oqtane is not compatible with some of the Blazor "solutions" provided by Microsoft in .NET 5. For example, Blazor's Javascript registration feature only supports ES6 style modules - not regular JavaScript libraries. CSS isolation is handled during build/deployment - which does not work in a dynamic application framework. Oqtane has its own solutions in these areas which involves declaring your resources within your razor components using the method described above, and then Oqtane will dynamically add/remove the references at run-time.