How to validate the SPFx Web part through UI components before deploying the app into the site

Technology Specialist
Published On :   06 May 2018
Visit Count
Today :  2    Total :   556

Yes, there is a way to apply external CSS on SharePoint workbench

Use the below set of code on your render method for react Element of “testwebpart.ts file” to apply external CSS to your workbench

 public render (): void {
 if (Environment.type === EnvironmentType.SharePoint) {//Modern SharePoint page
 SPComponentLoader.loadScript("/Style%20Library/SCRIPTS/jquery-1.12.2.min.js").then(() => {
 SPComponentLoader.loadScript("/Style%20Library/SCRIPTS/bootstrap.min.js").then(() => {
 this.test(); // Call your method here
 else {
 console.log("Entering into the code ..")

Once you are applied the above code, run the gulp serve to test your web part.

Here you go!

You are ready to test UI of the web part on your local workbench.