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? – FredericDietrich Dec 17 '19 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 '19 at 13:13
  • you can use twice, we use this solution on our project – FredericDietrich Dec 17 '19 at 13:24
  • ok i solved the issue :) by using require – Milind Dec 17 '19 at 13:53

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 '19 at 7:11
  • 1
    One of the nice answer – Md. Abu Sayed Dec 18 '19 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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