Cannot load my stylesheet into umbraco 17 backoffice to override uui-radio-group styles

Questions
,
1

Hello,

I have a stylesheet with the following styles but I am not able to load the stylesheet into Umbraco 17. I don’t think I am doing anything wrong :confused: but cannot work out what the problem is.

Under wwwroot/BackOfficeStyles

I have

backoffice.css

uui-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

uui-radio {
    margin-right: 1rem;
}

entrypoint.js

const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = '/App_Plugins/BackOfficeStyles/backoffice.css';
document.head.appendChild(style);

umbraco.package.json

{
  "name": "Backoffice Styles",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "BackOfficeStyles",
      "js": "/App_Plugins/BackOfficeStyles/entrypoint.js"
    }
  ]
}
2

Hi @charlesa-ccs

Your files are under wwwroot/BackOfficeStyles, but the manifest and entrypoint point at /App_Plugins/BackOfficeStyles/ - which are different folders. Backoffice extensions should live under wwwroot/App_Plugins/{name}/, so move everything in there. Also, the manifest needs to be umbraco-package.json (hyphen), not umbraco.package.json, otherwise it won’t get picked up at all.

Your entrypoint is named entrypoint.css but contains JS, and the manifest references entrypoint.js. Rename it to .js and export an onInit rather than running bare top-level code:

export const onInit = () => {
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = '/App_Plugins/BackOfficeStyles/backoffice.css';
  document.head.appendChild(style);
};

There’s a specific example for registering global CSS here:

Justin

3

Thanks @justin-nevitech I had couple of typos, accidently in my description. It appears I needed to add

export const onInit = () => {

I will check out the docs.

Thanks sooooo much <3