1

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 Jun 19 '19 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 Jun 20 '19 at 10:57
0

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"
          }
        }
      }
    }
  }
}
| improve this answer | |
  • 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 Jun 20 '19 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.