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?

if css file is loading correctly but not applying style, you have to mark style as '!important' in you css file — Siddharth Vaghasia
– Siddharth Vaghasia, Commented Jun 19, 2019 at 17:30
The thing is it is working in SharePoint Online but not working in SharePoint 2019. And after the file is loaded when I am making any change using the Chrome debugger it is applying successfully. — users1100
– users1100, Commented Jun 20, 2019 at 10:57

UBK · Accepted Answer · 2019-06-19 18:18:28Z

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

Thanks for answer!, the issue is it is working fine in SharePoint online environment but the solution is to be deployed in SharePoint 2019 where it is not working. — users1100
– users1100, Commented Jun 20, 2019 at 10:56

Stack Exchange Network

Unable to Load CSS from the style library using SPFx Extension

1 Answer 1

Your Answer

Hot Network Questions

Unable to Load CSS from the style library using SPFx Extension

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions