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?

  • you can add your css file in SytleLibrairy/custom and register the file in master page? Dec 17, 2019 at 13:12
  • If you see question then I mention that I am using spfx, mordern sites so I will not have masterpages
    – Milind
    Dec 17, 2019 at 13:13
  • you can use twice, we use this solution on our project Dec 17, 2019 at 13:24
  • ok i solved the issue :) by using require
    – Milind
    Dec 17, 2019 at 13:53

1 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.

    enter image description here

  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.

enter image description here
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');

  • add one more method require :)
    – Milind
    Dec 18, 2019 at 7:11
  • 1
    One of the nice answer Dec 18, 2019 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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