1

I need to import css file from remote so I use Module.Loader(its spfx&react project generated by yeoman);

public render(): React.ReactElement<IFooterProps> {
      ModuleLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
...

And the picture below is what my working fine web part is tranlated. How can I add remote css libraries?

enter image description here

1

Update - Saw you git code and scratched my head for couple of days, this is how i was able to load it from CDN

In your webpart code, you need to add below line:

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

After that you can add your code as below:

export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsWebPartProps> {

  public constructor() {
    super();

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

  }


   public render(): void {
    const element: React.ReactElement<IAnnouncementProperties> = React.createElement(Announcements, {
      httpClient: this.context.spHttpClient,
      siteUrl: this.context.pageContext.web.absoluteUrl,
      listName: "announcement2",//Announcements
      description: this.properties.description,
      annCount:this.properties.annCount
    });

    ReactDom.render(element, this.domElement);
  }

After that, just gulp serve. At my end, it loads the font awesome from cdn.

enter image description here

Reference - Add jQueryUI Accordion to your SharePoint client-side web part

  • Sorry its still same error... – TyForHelpDude Jan 25 '17 at 14:49
  • Instead of import spmoduleloader, can you try import moduleloader and use it in the render method ? – Gautam Sheth Jan 25 '17 at 15:18
  • I did and its same. how did you use it ? can you share any working copy ? – TyForHelpDude Jan 25 '17 at 15:26
  • I used the spmoduleloader and its working. Also, did you check config.json ? Are you on rc0 ? Try running gulp serve again after changing code. – Gautam Sheth Jan 25 '17 at 15:55
  • 1
    @TyForHelpDude - remove the sp-loader entry from config.json ! – Gautam Sheth Jan 28 '17 at 7:36

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.