TransWikia.com

Unable to Load CSS from the style library using SPFx Extension

SharePoint Asked on December 28, 2021

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?

One 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"
          }
        }
      }
    }
  }
}

Answered by UBK on December 28, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP