SPFX Custom CSS and deploy in CDN

Question

I am creating SPFx extension with custom CSS file not SCSS file.

My Question is how can I add path in SPComponentLoader.loadCss()?

And at the same time how can I upload the file in my "Public Office 365 CDN"?

Can somebody help me?

Answer 1

There are many ways to add the CSS in SPFx project.

Solution 1

1. Create a folder for CSS and store all of the CSS files.

   

2. Import all of the CSS files for example bootstrap, custom CSS, and other in a single file so that you can add that single file in your solution.

3. Add that file in your component tsx file.

import '../../../css/appStyle.css';

Solution 2

Use SPComponentLoader to add the CSS. Goto the *Webpart ts file and follow the steps.

1. Import SPComponentLoader in top section.

   import { SPComponentLoader } from '@microsoft/sp-loader';
   

   Write the line in render() method

SPComponentLoader.loadCss(' https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');