Unable to Load CSS from the style library using SPFx Extension

Question

I want to load the CSS file from Style Library of the site. I have created the SPFx extension of type Application Customizer.

The purpose of the CSS loading is to change the UI of the web parts.

I have used SPComponentLoader to load the CSS.

public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

SPComponentLoader.loadCss('<<SiteColl>>/Style%20Library/css/HomePageDesign.css');
return Promise.resolve();
}

The issue is when I am running the extension, it is loading the CSS file which I have inspected using the Chrome browser debugger tool.

When I make any changes to the css file from the Chrome debugger, it applies the css successfully as expected.

I guess it should be the sequence change when SharePoint is rendering the web parts and executing the extension.

What should be the solution for this?

css spfx extensions

UBK · Answer

Try loading the CSS following way. I have used it myself and was able to style the SharePoint modern page as per my need.

public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

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 + "?r=" + Math.random();
        customStyle.rel = "stylesheet";
        customStyle.type = "text/css";
        head.insertAdjacentElement("beforeEnd", customStyle);
    }

return Promise.resolve();
  }

Here, the cssUrl is stored in the properties (serve.json file). Also, I have added a random string at the end of the CSS url to make it unique and stop the caching.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://yourtenant.sharepoint.com/sites/yoursite",
      "customActions": {
        "88bf0fb0-5b94-47bc-aa19-72b453836aeb": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "cssurl": "/sites/yoursite/Shared%20Documents/custom.css"
          }
        }
      }
    },
    "injectCustomCss": {
      "pageUrl": "https://yourtenant.sharepoint.com/sites/yoursite",
      "customActions": {
        "88bf0fb0-5b94-47bc-aa19-72b453836aeb": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "cssurl": "/sites/yoursite/Shared%20Documents/custom.css"
          }
        }
      }
    }
  }
}

Unable to Load CSS from the style library using SPFx Extension

One Answer

Add your own answers!

Ask a Question