How to Inject CSS or JavaScript to SharePoint Modern page using SPFX

Question

I have implemented the SPFX extension to inject CSS and JS to Sharepoint modern page. I could able to deploy it on-site without any error. But it is rendering my custom CSS and script

How to debug it to see where is the issue?

I have referred to this link to implement it: https://github.com/hugoabernier/react-application-injectcss

Answer 1

@user9989023,

You can open F12 tool to see if the css/js file has been loaded or not. Or you can add breakpoint and debug it through remote workbench.

• https://learn.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode#debug-solution-using-hosted-workbench

Below is a demo about how to inject CSS/JS:

• https://github.com/kongmengfei/SharedSPFx/blob/master/app-extension-js/src/extensions/helloWorld/HelloWorldApplicationCustomizer.ts

Result:

More Reference:

• https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

BR