Return to Question

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

    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  

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.

For future reference, here are the links to the issues on GitHub:

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.

As reference, here are the links to the issues on GitHub:

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

For future 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