Sharepoint Framework (Drop 6): How to load external css in a WebPart

Question

I am fairly new to the SharePoint Framework development stack and am building a WebPart with AngularJS 1.x and ngOfficeUIFabric.

I'm using the current drop (Sharepoint Framework Developer Preview Drop 6: Nov 22, 2016).

I used this blog post (amongst others) as reference: Building SharePoint Framework Client-Side Web Parts with Angular.

Drop 6 comes with an older version of the css files for office ui fabric. I want to update those css files to the current version to be able to use the components.

The proposed solution so far has been to use the ModuleLoader. First you import ModuleLoader in your code:

    import ModuleLoader from '@microsoft/sp-module-loader';

Then, in the web part's constructor you use it to load the CSS file from CDN:

    public constructor(context: IWebPartContext) {
      super(context);

      ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css');
      ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');
    }


**This does not work with Drop 6 anymore.** Apparently there is a problem with webpack:

λ gulp  
Build target: DEBUG  
[11:48:40] Using gulpfile  
~\Documents\Projects\NewCommunicationTypeWizard3\gulpfile.js  
[11:48:40] Starting gulp  
[11:48:40] Starting 'default'...  
[11:48:40] Starting subtask 'pre-copy'...  
[11:48:40] Finished subtask 'pre-copy' after 13 ms  
[11:48:40] Starting subtask 'copyStaticAssets'...  
[11:48:40] Starting subtask 'sass'...  
[11:48:41] Finished subtask 'sass' after 781 ms  
[11:48:41] Starting subtask 'tslint'...  
[11:48:41] Starting subtask 'typescript'...  
[11:48:41] [typescript] Using custom version: 2.0.10  
[11:48:41] Finished subtask 'copyStaticAssets' after 926 ms  
[11:48:41] Finished subtask 'tslint' after 169 ms  
[11:48:44] Finished subtask 'typescript' after 2.92 s  
[11:48:44] Starting subtask 'ts-npm-lint'...  
[11:48:44] Finished subtask 'ts-npm-lint' after 42 ms  
[11:48:44] Starting subtask 'post-copy'...  
[11:48:44] Finished subtask 'post-copy' after 166 μs  
[11:48:44] Starting subtask 'collectLocalizedResources'...  
[11:48:44] Finished subtask 'collectLocalizedResources' after 6.03 ms  
[11:48:44] Starting subtask 'configure-webpack'...  
[11:48:44] Finished subtask 'configure-webpack' after 16 ms  
[11:48:44] Starting subtask 'webpack'...  
[11:48:48] Error - [webpack] 'dist':  
./~/@microsoft/sp-module-loader/lib/SystemJsWrapper.js  
Module not found: Error: Cannot resolve module 'raw-script' in C:\Users\MWB\Documents\Projects\NewCommunicationTypeWizard3\node_modules\@microsoft\sp-module-loader\lib  

...

@ ./~/@microsoft/sp-module-loader/lib/SystemJsWrapper.js 9:4-56  
./~/@microsoft/sp-module-loader/lib/SystemJsWrapper.js  
Module not found: Error: Cannot resolve module 'raw-script' in   C:\Users\MWB\Documents\Projects\NewCommunicationTypeWizard3\node_modules\@microsoft\sp-module-loader\lib

...

@ ./~/@microsoft/sp-module-loader/lib/SystemJsWrapper.js 11:13-55  
./~/@microsoft/sp-module-loader/lib/SPModuleLoader.resx.js  
Module not found: Error: Cannot resolve module 'resx-strings' in   C:\Users\MWB\Documents\Projects\NewCommunicationTypeWizard3\node_modules\@microsoft\sp-module-loader\lib

...

@ ./~/@microsoft/sp-module-loader/lib/SPModuleLoader.resx.js 6:6-29  
./~/@microsoft/sp-module-loader/lib/SystemJsWrapper.resx.js  
Module not found: Error: Cannot resolve module 'resx-strings' in   C:\Users\MWB\Documents\Projects\NewCommunicationTypeWizard3\node_modules\@microsoft\sp-module-loader\lib

...  
*A lot more errors exactly like the previous*  
...

@ ./~/@microsoft/sp-module-loader/lib/DeveloperTools/Components/DeveloperModules/LoadingOrErrorModule/LoadingOrErrorModule.resx.js 6:6-29

[11:48:48] Finished subtask 'webpack' after 4.07 s  
[11:48:48] Starting subtask 'configure-webpack-external-bundling'...  
[11:48:48] Finished subtask 'configure-webpack-external-bundling' after 484 μs  
[11:48:48] Starting subtask 'copyAssets'...  
[11:48:48] Finished subtask 'copyAssets' after 122 ms  
[11:48:48] Starting subtask 'writemanifests'...  
[11:48:50] Finished subtask 'writemanifests' after 1.55 s  
[11:48:50] Finished 'default' after 9.55 s  
[11:48:50] ==================[ Finished ]==================  
[11:48:51] Project new-communication-type-wizard version: 0.0.2  
[11:48:51] Build tools version: 0.11.1  
[11:48:51] Node version: v6.9.1  
[11:48:51] Total duration: 15 s  
[11:48:51] Task errors: 1  

How can I reference external css files now?

Update and solution summary (15.12.2016): As pointed out, this is a bug specific to drop 6 of the sharepoint framework developer preview.

Nothing changes in regard to how we load external css.

The bug is easily fixable by the developer himself by adding this line "@microsoft/sp-module-loader": "node_modules/@microsoft/sp-module-loader/dist/sp-module-loader.js", to the config/config.json under externals:

{
  "entries": [
    {
      ... omitted for brevity ...
    }
  ],
  "externals": {
    //Inserting the next line fixes bug #286 in SPfx drop 6: 
    "@microsoft/sp-module-loader": "node_modules/@microsoft/sp-module-loader/dist/sp-module-loader.js",
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    ... omitted for brevity ...
  },
  "localizedResources": {
    ... omitted for brevity ...
  }
}

And use SPModuleLoader instead of ModuleLoader (was renamed in drop 6).

As reference, here are the links to the issues on GitHub:
- sp-module-loader loadCss broken in Drop 6 #286
- Using custom CSS plus the ModuleLoader.loadCss() problem #79

Answer 1

Did you add sp-module-loader in your config.json like the following "@microsoft/sp-module-loader": "node_modules/@microsoft/sp-module-loader/dist/sp-module-loader.js",? Check out sp-module-loader loadCss broken in Drop 6 which might help.

Answer 2

Also, change ModuleLoader to SPModuleLoader. It seems like the class has been renamed in drop 6.