I've followed step-by-step this article on how to inject CSS in modern SharePoint pages using Extensions:
Everything works perfectly in localhost but not when using CDN. The css is apparently just ignored.
This is the code that I am using in my OnInit method:
const cssUrl: string = this.properties.cssurl;
if (cssUrl) {
// inject the style sheet
const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
let customStyle: HTMLLinkElement = document.createElement("link");
customStyle.href = cssUrl;
customStyle.rel = "stylesheet";
customStyle.type = "text/css";
head.insertAdjacentElement("beforeEnd", customStyle);
}
My goal is to inject this css to hide the left-side navigation and place the search on top of the page.
nav[role='navigation'] {
display: none !important;
}
div[class^='searchBox_'] {
position: absolute;
right: 200px;
top: 20px;
}
div[class^='pageContainer_'] {
left: 0 !important;
}
Again, in localhost it works great. Well, not perfect because there is a delay fot the changes to occur, especially in the first access. But I can live with that.
when using --ship things don't work.
Is there an alternative way of accomplishing this?