4

I searched and used below code snippet:

 import * as React from 'react'; import styles from './Announcements.module.scss'; 
import { HttpClient, SPHttpClient, SPHttpClientConfigurations } from '@microsoft/sp-http'; 
import { css, Button } from 'office-ui-fabric-react'; 
import SPModuleLoader from '@microsoft/sp-module-loader';


export default class Announcements extends React.Component { 
constructor(props: IAnnouncementProperties, state: IWebPartState) { 

super(props); 

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

    }

WebParts are working fine but getting below error after adding 'SPModuleLoader' to constructor. I also searched about this on internet and found that many developers claimed that it works.

enter image description here

  • Are you bound to Bootstrap? Microsoft developed Fabric to replace (almost) everything Bootstrap does. – Danny '365CSI' Engelman Jan 27 '17 at 12:37
  • Can you share any documentation or source that I can get and use like bootstrap ? – TyForHelpDude Jan 27 '17 at 13:08
  • 1
    -react is the React implementation of using Fabric Components, Fabric (Core / Styles) itself does what Bootstrap does: dev.office.com/fabric#/styles – Danny '365CSI' Engelman Jan 27 '17 at 13:09
  • Thats okay now I will go over on this docs, can you post this as answer so I can accept it. Thanks – TyForHelpDude Jan 27 '17 at 13:33
  • No, it is not the answer to the error you posted. some SPFx guru will answer – Danny '365CSI' Engelman Jan 27 '17 at 13:47
5

Ignoring the BootStrap vs. Fabric conversation, here's how to load your css.

1 - In RC0, the loader changed a bit. You need to import it as

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

and then reference it as

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

2 - Can you move the code to OnInit, rather than the constructor? In RC0 we got rid of most of the constructor logic, and you won't have much data at all in it any more. Something like this:

protected onInit(): Promise<void> {

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

    return super.onInit();
}
  • how can I create onIit method in this class ? – TyForHelpDude Jan 27 '17 at 23:35
  • Updated the original response – PatMill_MSFT Jan 27 '17 at 23:38

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.