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