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

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 ..")
 
 this.test();
 
 }
 
 }
 

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.